vue 动态组件

• 动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。
• 在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，如果有，则显示；

看例子：

<!-- html部分 -->

<div id="app">
    <component is="one"></component>
</div>

// js 部分

new Vue({
    el: '#app',
    components: {
        one: {template: '<div>我是线路一</div>'},
        two: {template: '<div>我是线路二</div>'},
        thr: {template: '<div>我是线路三</div>'}
    }
})

上面代码注册了三个组件，在 component 标签里有个属性 is，is=one，所以页面会渲染名字叫 one 的组件，显示结果如下：

我是线路一

如果给 is 属性绑定动态值，那么就可以实现组件的动态切换，例子如下：

<!-- html 部分 -->

<div id="app">
    <button v-for="item in tabs" @click="change = item.id">
    	{{ item.text }}
    </button>
    <component :is="change"></component>
</div>

// js 部分

new Vue({
  el: '#app',
  data: {
  	change: 'one' // 默认显示组件 one
    tabs: [
    	{id: 'one', text: '线路一'},
        {id: 'two', text: '线路二'},
        {id: 'thr', text: '线路三'}
    ]
  },
  components: {
  	one: {template: '<div>我是线路一</div>'},
    two: {template: '<div>我是线路二</div>'},
    thr: {template: '<div>我是线路三</div>'}
  }
})

上面代码用 v-bind 给属性 is 动态传递了值，实现了组件的动态切换，效果如下：