Vue指令编译自定义指令
Vue directive to compile custom directives
我写了一个包装器指令,它利用了 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会报未知组件。这可能是因为我在渲染指令的上下文中没有自定义指令 imported/required。有解决办法吗?我需要让这个包装器指令进行编译的原因是因为像 vue.Draggable 这样的库依赖 'v-for' 来重新排序列表元素。但是,我希望能够让不同的组件可拖动,这就是为什么我只传递模板以编译到 v-for 中的原因。
您可以使用组件标签。查看: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 的 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会报未知组件。这可能是因为我在渲染指令的上下文中没有自定义指令 imported/required。有解决办法吗?我需要让这个包装器指令进行编译的原因是因为像 vue.Draggable 这样的库依赖 'v-for' 来重新排序列表元素。但是,我希望能够让不同的组件可拖动,这就是为什么我只传递模板以编译到 v-for 中的原因。
您可以使用组件标签。查看: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>`
})