0

我编写了一个使用 vue 的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会抱怨未知组件。这可能是因为我没有在渲染指令的上下文中导入/需要自定义指令。有解决办法吗?我需要让这个包装器指令进行编译的原因是因为像 vue.Draggable 这样的库依赖于“v-for”来重新排序列表元素。但是,我希望能够让不同的组件可拖动,这就是为什么我只传递模板以编译到 v-for.xml 中。

4

1 回答 1

1

您可以使用组件标签。查看:https ://vuejs.org/v2/guide/components.html#Dynamic-Components

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

流程大致是这样的:

  1. 我在我的应用程序中注册组件
  2. 在 listItemsToRender 数据属性中列出它们
  3. 使用<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>`
})
于 2019-06-24T22:03:01.887 回答