我编写了一个使用 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 中。