Question

我写了一个包装指令，该指令利用了vue的 Render 函数。在render函数中，它所做的就是：

render: function(createElement) {
    const compiled = Vue.compile(this.$props.template);
    return compiled.render.call(this, createElement);
}

我使用的是：

<Render v-for="item in itemsToRender" :key="item.id" />

这适用于本机html元素：

const itemsToRender = ['<p>test</p>', '<h1>HELLO</h1>'];

但是，如果我传入自己的自定义指令（如

），

<my-directive></my-directive>

然后vue将抱怨未知组件。这可能是因为我没有在render指令的上下文中导入/要求自定义指令。有没有解决的办法？我需要使用该wrapper指令进行编译的原因是因为像vue.Draggable这样的库依赖于'v-for'对列表元素进行重新排序。但是，我希望能够拖动不同的组件，这就是为什么我只传递模板以将其编译到v-for中的原因。

Answer 1

您可以使用component标签。检出：https://vuejs.org/v2/guide/components.html#Dynamic-Components

我在这里举了一个例子：https://codepen.io/bergur/pen/jjwzEq

流程大致如下：

我在我的应用程序中注册了组件
在listItemsToRender数据属性中列出它们
使用<component>标签进行渲染

这是代码

new Vue({
  name: 'main',
  el: '#main',  
  components: {
    CompA,
    CompB
  },
  data() {
    return {
      header: 'Multiple components',
      itemsToRender: [CompA, CompB]           
    }
  },  
  template: `
  <div>
     {{ header }}
     <component v-for="item in itemsToRender" :is="item" />
  </div>`
})

Vue指令可编译自定义指令

1 个答案: