一、什么是動態(tài)組件

定義:

多個組件掛載到同一個組件上，通過參數(shù)動態(tài)的切換不同組件就是動態(tài)組件。

書寫形式：

<component :is="componentName"></component>

內(nèi)置組件：

component：是vue里面的一個內(nèi)置組件。

vue內(nèi)置的組件還包括：

transition：作為單個元素/組件的過渡效果
transition-group：作為多個元素/組件的過渡效果。
keep-alive：包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們
slot：作為組件模板之中的內(nèi)容分發(fā)插槽

二、使用方式

通過使用<component>元素動態(tài)的綁定到它的is特性，來實現(xiàn)動態(tài)組件的切換。

如果is匹配不到相應(yīng)的組件的時候是不盡行任何dom元素的渲染的

1、已注冊組件的名字----適用于少量組件動態(tài)切換的情況

<template>
  <div class="btn_box">
    <button @click="changePage(0)">關(guān)于</button>
    <button @click="changePage(1)">詳情</button>
    <button @click="changePage(2)">主頁</button>
    <component :is="list[idx]"></component>
  </div>
</template>

<script>
import About from './About'
import Detail from './Detail'
import Home from './Home'
export default {
  name: 'index',
  components: {
    About,
    Detail,
    Home
  },
  data(){
    return {
      idx: 0,
      list: ['About', 'Detail', 'Home']
    }
  },
  methods: {
    // 切換頁面
    changePage(idx){
      this.idx = idx;
    }
  }
}
</script>

<style>
.btn_box {
  margin-bottom: 20px;
}
.btn_box button {
  margin-right: 5px;
}
</style>

2、vue組件中引入的組件----適用于多個組件動態(tài)切換的情況

componentPage.js

import About from './About'
import Detail from './Detail'
import Home from './Home'

export default [
    About,
    Detail,
    Home
]

index.vue

引入的組件必須定義在data中，不可以直接在組件中使用

<template>
  <div class="btn_box">
    <button @click="changePage(0)">關(guān)于我們</button>
    <button @click="changePage(1)">詳情</button>
    <button @click="changePage(2)">主頁</button>
    <component :is="componentPage[idx]"></component>
  </div>
</template>

<script>
import componentPage from './componentPage'
export default {
  name: 'index',
  data(){
    return {
      componentPage,
      idx: 0
    }
  },
  methods: {
    // 切換頁面
    changePage(idx){
      this.idx = idx;
    }
  }
}
</script>

<style>
.btn_box {
  margin-bottom: 20px;
}
.btn_box button {
  margin-right: 5px;
}
</style>

3、全局注冊的組件Vue.component----適用于全局組件的動態(tài)切換

main.js

import Vue from 'vue'
import App from './App.vue'
import About from './views/About'
import Detail from './views/Detail'
import Home from './views/Home'

Vue.config.productionTip = false

Vue.component("About", About)
Vue.component("Detail", Detail)
Vue.component("Home", Home)

new Vue({
  render: h => h(App),
}).$mount('#app')
]

index.vue

<template>
  <div>
    <div class="btn_box">
      <button @click="changePage(0)">關(guān)于我們</button>
      <button @click="changePage(1)">詳情</button>
      <button @click="changePage(2)">主頁</button>
    </div>
    <component :is="list[idx]"></component>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return {
      idx: 0,
      list: ['About', 'Detail', 'Home'],
    }
  },
  methods: {
    // 切換頁面
    changePage(idx){
      this.idx = idx;
    }
  }
}
</script>

<style>
.btn_box {
  margin-bottom: 20px;
}
.btn_box button {
  margin-right: 5px;
}
.about_sty {
    background-color: darkseagreen;
}
.home_sty {
    background-color: aqua;
}
.detail_sty {
    background-color: coral;
}
</style>

三、動態(tài)組件的緩存

使用動態(tài)組件來回切換時，組件是要被銷毀的，若不想讓數(shù)據(jù)銷毀可以使用<keep-alive>，它可以包裹動態(tài)組件，這樣就不會被銷毀。

<keep-alive>
    <component :is="componentId"></component>
</keep-alive>

四、總結(jié)

使用動態(tài)組件就可以像使用實際組件一樣，開發(fā)體驗上實現(xiàn)零差別，代碼處理邏輯實現(xiàn)解耦