vue动态组件的用法

何处锦绣不灰堆

发布于 2020-10-26 17:09:54

7890

发布于 2020-10-26 17:09:54

前文

今天写一篇关于vue组件的扩展用法，之前将一些基本用法已经写过了，没有看过的可以自行找一下，今天要写的是一片关于vue 官方给的动态组件的一种用法，其实这个用法的使用场景使用基本组件也是可以胜任的，只是既然有这样一种写法的存在，我们还是需要实现一下，网上呢关于他的用法写的也有很多，我一般写的文章都是最基础的使用方法，没有一些花里胡哨的写法，所以很容易看得明白！废话不多说，上代码

目录结构

childA

<template>
  <div>
    {{msg}}
    <el-checkbox>苹果</el-checkbox>
    <el-checkbox>香蕉</el-checkbox>
    <el-checkbox>橙子</el-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'this is A'
      }
    }
  }
</script>

<style>
</style>

childB

<template>
  <div>
    {{msg}}
    <el-switch v-model="value" active-text="左边" inactive-text="右边">
    </el-switch>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'this is B',
        value: true
      }
    }
  }
</script>

<style>
</style>

index

<template>
  <div>
    <el-button @click="showChild('A')">显示A组件</el-button>
    <el-button @click="showChild('B')">显示B组件</el-button>
    <keep-alive>
      <component :is='currCom'></component>
    </keep-alive>
  </div>
</template>

<script>
  import childA from '../childComponent/childA.vue'
  import childB from '../childComponent/childB.vue'
  export default {
    components: {
      childA,
      childB
    },
    data() {
      return {
        currCom: childA
      }
    },
    methods: {
      showChild(Str) {
        this.currCom = 'child' + Str
      }
    }
  }
</script>

<style scoped="scoped">
  /deep/ .el-button {
    margin: 10px;
  }
</style>

代码解析

上面三段就是实现了一个简单的动态组件的全部代码，childA组件是第一个子组件，childB组件是另一个子组件，我们引入组件的时候还是一样的import的方式，但是渲染的时候方式是直接使用component，使用:is来决定展示哪一个组件，这里使用keep-alive的原因呢，组件每一次渲染都是全新的，会导致一个现象就是之前用户的操作丢失，为了保证用户的操作的原本性，使用缓存的标签就可以了，效果如下：