vue.js - Vuejs - 动态组件模板和范围中的插值

Question

我一直在尝试让一个动态组件起作用，它允许我根据提供的模板单独呈现列表项。
然而，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>

Answer 1

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
    }
 }