带有动态数据的 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 文档说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 。

如果您需要随 props 一起更改组件，那么您只需更改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>