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的运作方式它允许您内联绑定/创建匿名组件，而不是添加/操作引用的组件。

正确的解决方案似乎是：

<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用于组件名称属性，因为它具有绑定到对象的属性。您可以注册自定义组件，如：

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

Vuejs - 动态组件模板中的插值＆amp;范围

1 个答案: