我一直在尝试让一个动态组件起作用,它允许我根据提供的模板单独呈现列表项。
然而,Vue 似乎在父级范围内插入模板,而不是在 dynamicComponent
范围内。
简单的例子:
<dynamicComponent
v-for="item in listItems"
v-bind:input="item"
v-bind:is="{template:'<p>{{input.name}}</p>'}"
</dynamicComponent>
这会失败,因为 input
在父范围内是未知的。
有没有办法动态传递模板并让它在组件范围内引用变量/属性?
编辑:解决方案
原来我有点误解了v-bind:is
的工作原理。
它允许您内联绑定(bind)/创建匿名组件,而不是添加/操作引用组件。
正确的解决方案似乎是:
<component
v-for="item in listItems"
v-bind:input="item"
v-bind:is="{template:'<p>{{input.name}}</p>', props:['input']}">
</component>
最佳答案
v-bind
用于组件名称属性,正如您所拥有的,它绑定(bind)到一个对象。您可以注册自定义组件,例如:
component:{
name: 'my-component',
template: '<div>...foo...</div>',
},
data () {
return {
currentComponent: 'my-component'
}
}
然后执行以下操作:
<dynamicComponent v-bind:is="current-component">..</dynamicComponent>
当然,您可以根据需要注册多个组件,然后将 currentComponent
数据属性设置为您想要渲染的任何一个。
另一个例子:
import Component1 from 'component-1'
import Component2 from 'component-2'
import Component3 from 'component-3'
components: {
'component-1': Component1,
'component-2': Component2,
'component-3': Component3
},
data () {
return {
current: 'component-1'
}
},
methods: {
someAction (componentName) {
this.current = componentName
}
}
关于vue.js - Vuejs - 动态组件模板和范围中的插值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48365450/