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

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 传给 child 。您还可以为其添加其他属性，包括 is。

如果您需要更改组件和 props，那么您只需更改 data 属性，或任何您想调用的名称。

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