vue中，component动态组件的三种方式 & keep-alive实现动态组件的缓存

vue中，component动态组件的三种方式 & keep-alive实现动态组件的缓存

1、什么是动态组件

定义:

多个组件挂载到同一个组件上，通过参数动态的切换不同组件就是动态组件。

书写形式：

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

内置组件：

component：是vue里面的一个内置组件。

vue内置的组件还包括：

• transition：作为单个元素/组件的过渡效果
• transition-group：作为多个元素/组件的过渡效果。
• keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
• slot：作为组件模板之中的内容分发插槽

2、使用方式

通过使用元素动态的绑定到它的is特性，来实现动态组件的切换。

如果is匹配不到相应的组件的时候是不尽行任何dom元素的渲染的

2.1、已注册组件的名字----适用于少量组件动态切换的情况

<template>
  <div class="btn_box">
    <button @click="changePage(0)">关于</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.2、vue组件中引入的组件----适用于多个组件动态切换的情况

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)">关于我们</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>

2.3、全局注册的组件Vue.component----适用于全局组件的动态切换

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)">关于我们</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>

3、动态组件的缓存

使用动态组件来回切换时，组件是要被销毁的，若不想让数据销毁可以使用，它可以包裹动态组件，这样就不会被销毁。

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

4、总结

使用动态组件就可以像使用实际组件一样，开发体验上实现零差别，代码处理逻辑实现解耦。