vue 动态添加组件_21、动态组件

重点：

component 元素可用来挂载不同的组件；
使用 is 来动态挂载组件，注意要使用 v-bind，也就是 :is 。

---

今天的内容很简单，只有一个内容——component。

Vue 给我们提供了一个 component 元素，它可以用来动态挂载不同的组件。

就像斗地主的癞子玩法，component 就是“癞子”，你想让 component 是哪个组件，它就可以是哪个组件。

还记得刚开始学组件的时候，我们学了一个“在标签上挂载组件”吗？

<table>
  <tr is="my-component"></tr>  // table 中写的是 tr，用 is 属性把 my-component 挂载到 tr
</table>

无独有偶，今天的 component，同样使用 is 来挂载不同的组件。

接下来就通过一个 demo 展开学习。

demo：有四个按钮，点击不同的按钮，显示不同的视图。

1.准备好四个组件和四个按钮

<div id="app">
    <component></component>
    <button>第1句</button>
    <button>第2句</button>
    <button>第3句</button>
    <button>第4句</button>
</div>

// 下面四个组件，每个组件代表不同的视图，
// 简单起见，每个视图里只有一句不同的诗
Vue.component('A-component', {
  template: '<div>离离原上草</div>'
})
Vue.component('B-component', {
  template: '<div>一岁一枯荣</div>'
})
Vue.component('C-component', {
  template: '<div>野火烧不尽</div>'
})
Vue.component('D-component', {
  template: '<div>春风吹又生</div>'
})

var app = new Vue({
  el: '#app',
  data: {}
})

2. 让 component 默认显示 A-component

<div id="app">
    <component :is="thisView"></component>  // 1. 用 is 动态绑定 thisView
    <button>第1句</button>
    <button>第2句</button>
    <button>第3句</button>
    <button>第4句</button>
</div>

Vue.component('A-component', {
  template: '<div>离离原上草</div>'
})
Vue.component('B-component', {
  template: '<div>一岁一枯荣</div>'
})
Vue.component('C-component', {
  template: '<div>野火烧不尽</div>'
})
Vue.component('D-component', {
  template: '<div>春风吹又生</div>'
})

var app = new Vue({
  el: '#app',
  data: {
    thisView: 'A-component'  // 2. thisView 的值是 A-component
  }
})

渲染：

3. 给按钮添加点击事件，显示不同的诗句（视图）

<div id="app">
    <component :is="thisView"></component>
    <button @click="handleView('A')">第1句</button>  // 1. 添加点击事件，并传入不同的参数
    <button @click="handleView('B')">第2句</button>
    <button @click="handleView('C')">第3句</button>
    <button @click="handleView('D')">第4句</button>
</div>

Vue.component('A-component', {
  template: '<div>离离原上草</div>'
})
Vue.component('B-component', {
  template: '<div>一岁一枯荣</div>'
})
Vue.component('C-component', {
  template: '<div>野火烧不尽</div>'
})
Vue.component('D-component', {
  template: '<div>春风吹又生</div>'
})

var app = new Vue({
  el: '#app',
  data: {
    thisView: 'A-component'
  },
  methods: {
    handleView: function (tag) {
      this.thisView = `${tag}-component`  // 2. 改变 thisView 的值，也就是改变视图
    }
  }
})

现在，点击不同的按钮，就实现了显示不同的视图的功能。

以上四个组件，每个组件就是一个视图，点击按钮切换组件，也就切换了视图。

动态组件体现在哪儿？

component 元素就是动态的啊，当你点击第一个按钮，component 就挂载了 A-component 组件，点击第二个按钮，component 就挂载了 B-component 组件，以此类推。所以，component 就可以看做是一个变来变去（动态）的组件。