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

Question

I'm trying to use the <component> element to dynamically display a chosen component. Each of these displayed components can take one of any number of data objects. Something like:

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

However, the Vue documentation says the v-bind:is attribute can be used to pass either a component name or the options object.

It is unclear how I would conditionally get an object of values for that component to use and also conditionally change which component is shown.

I am very green with using Vue (coming fresh off a knockout kick) so perhaps I am simply misunderstanding the intention of the component tag.

Answer 1

you can simply use v-bind

html

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

script

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

and it will pass currentData down to child. You can also add other properties along with it, including is .

If you need to change the component along with props, then you just change the data property, or whatever you want to call it.

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

Answer 2

This example might help you understand it. https://jsfiddle.net/jacobgoh101/mLbrj5gd/

---

For passing Component Name

If the component is global, you can pass the component name to v-bind:is

for eg,

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

HTML

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

---

For passing option

A Vue component is literally just a Javascript object with specific properties

for eg,

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