Question

我正在尝试使用<component>元素动态显示选定的组件。这些显示的组件中的每一个都可以采用任意数量的数据对象之一。像这样：

<div id="containers">
    <component v-bind:is="currentView"></component>
</div>

var myVue = new Vue({
    el:"#containers",
    data:{
        currentView: "my-component-one",
        currentData: {...}
    },
    method: {
        changeView: function(){
            //change this.currentView
            //change this.currentData
        }
    }
});

但是，Vue documentation表示v-bind:is属性可用于传递组件名称或。

目前尚不清楚我将如何有条件地获取该组件要使用的值的对象，以及如何有条件地更改显示的组件。

我对使用Vue非常了解（从淘汰赛中崭露头角），所以也许我只是误解了组件标签的意图。

Answer 1

您只需使用v-bind

html

<component v-bind:is="currentView" v-bind="data"></component>

脚本

data()
{
    return {
        data: {
            currentData: "example"
        } 
    }
}

，它将currentData传递给孩子。您还可以一起添加其他属性，包括is。

如果您需要随道具一起更改组件，则只需更改data属性或任何您想调用的属性。

https://codesandbox.io/s/7w81o10mlx

Answer 2

此示例可以帮助您理解它。 https://jsfiddle.net/jacobgoh101/mLbrj5gd/

用于传递组件名称

如果组件是全局组件，则可以将组件名称传递给v-bind:is

例如

Vue.component('test1', {
    template: `<div>test1</div>`
})

HTML

<component is="test1"></component>

用于通过选项

Vue组件实际上只是具有特定属性的Javascript对象

例如

  <component v-bind:is="{
    template: `<div>test2</div>`
  }"></component>

具有动态数据的Vue.js动态组件

2 个答案: