vue动态组件的用法

心已赠人 2022-12-13 04:47 158阅读 0赞

#### 前文 ####

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

#### 目录结构 ####

![目录结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70_pic_center]

#### 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的原因呢，组件每一次渲染都是全新的，会导致一个现象就是之前用户的操作丢失，为了保证用户的操作的原本性，使用缓存的标签就可以了，效果如下：

#### 效果 ####

![在这里插入图片描述][20201010145645613.png_pic_center]  
![在这里插入图片描述][20201010145656640.png_pic_center]  
![在这里插入图片描述][20201010145712836.png_pic_center]  
![在这里插入图片描述][20201010145723277.png_pic_center]

#### OVER ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/234c42bba1f74242a6b13a4eeac62dc1.png
[20201010145645613.png_pic_center]: /images/20221123/58f233cecd4446e0b9b719b302148a2b.png
[20201010145656640.png_pic_center]: /images/20221123/311d56dae7dc4733931303880b43b500.png
[20201010145712836.png_pic_center]: /images/20221123/6a78d17ff4e946c1afb9dd6aa0452c51.png
[20201010145723277.png_pic_center]: /images/20221123/8907ed0f2abf4d18b9f2475a2b1f6835.png