VUE —— 7、组件（组件动态、全局组件、缓存）

浅浅的花香味﹌ 2022-08-31 04:59 350阅读 0赞

**目录**

5.动态模板

（1）通过条件匹配来显示

（2）动态模板

（3）异步组件

6.全局组件（公共组件）

（1）添加一个

（2）添加多个

1.执行流程

2.使用

7.keep-alive组件缓存

--------------------

## 5.动态模板 ##

当在这些组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题

**以下三种方式：**

![20210723061302918.png][]

### （1）通过条件匹配来显示 ###

**testA.****vue**

<template>
      <div>A组件：{
       {title}}</div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: Math.random(),	//产生随机数
        };
      },
      methods: {},
      components: {},
    };
    </script>

**testB.****vue**

<template>
      <div>B组件：{
       {title}}</div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          title: Math.random(),	//产生随机数
        };
      },
      methods: {},
      components: {},
    };
    </script>

**index.****vue**

<template>
      <div>
    ------------------------------------- 添加 -----------------------------------------
          <button @click="flag = 'testA'">
          A组件
          </button>
          <button @click="flag = 'testB'">
          B组件
          </button>
          <testA v-if="flag == 'testA'" />
          <testB v-if="flag == 'testB'" />
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    ------------------------------------- 添加 -----------------------------------------
    import testA from "./testA"; 
    import testB from './testB'; 
    -----------------------------------------------------------------------------------
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
    ------------------------------------- 添加 -----------------------------------------
        testA,
    testB
    -----------------------------------------------------------------------------------
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723061447425.png][]

![20210723061449674.png][]

###  （2）动态模板 ###

vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中用:is来挂载不同的组件。

**index.****vue**

<template>
      <div>
          <button @click="flag = 'testA'">
          A组件
          </button>
          <button @click="flag = 'testB'">
          B组件
          </button>
    ------------------------------------- 关掉 -----------------------------------------
          // <testA v-if="flag == 'testA'" />
          // <testB v-if="flag == 'testB'" />
    ------------------------------------- 添加 -----------------------------------------
          <component :is="flag"></component>	//简化，不用添加testA、testB、testC..一堆 
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    import testA from "./testA"; 
    import testB from './testB'; 
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
        testA,
    testB
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723061520226.png][]

![20210723061522567.png][]//一样

###  （3）异步组件 ###

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件 定义

index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]//提前加载

**index.****vue**

<template>
      <div>
          <button @click="flag = 'testA'">
          A组件
          </button>
          <button @click="flag = 'testB'">
          B组件
          </button>
          // <testA v-if="flag == 'testA'" />
          // <testB v-if="flag == 'testB'" />
          <component :is="flag"></component>	//简化，不用添加testA、testB、testC..一堆 
      </div>
    </template>
    
    <script>
    import testA from "./testA"; 
    ------------------------------------- 关掉 -----------------------------------------
    import testB from './testB'; 
    -----------------------------------------------------------------------------------
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
    testA,
    ------------------------------------- 换成 -----------------------------------------
        //不会提前加载，在需要用到的时候才会加载组件（异步加载）
        //异步解析组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数
        testB: () => import("./testB"),
    -----------------------------------------------------------------------------------
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723061600323.png][]

![20210723061603572.png][]//一样

##  6.全局组件（公共组件） ##

使用方式：某些页面需要某些样式等等，直接添加即可

在我们项目开发中，经常需要import或者export各种模块，那么有没有什么办法可以简化这种引入或者 导出操作呢

### （1）添加一个 ###

**main****.js**

//定义全局组件
    Vue.component('myComponent',
    {render()
        {return <h1>hello world</h1>}
    });

**index.****vue**

<template>
      <div>
    ------------------------------------- 添加 -----------------------------------------
        
        <myComponent />
    -----------------------------------------------------------------------------------
          <button @click="flag = 'testA'">
          A组件
          </button>
          <button @click="flag = 'testB'">
          B组件
          </button>
          // <testA v-if="flag == 'testA'" />
          // <testB v-if="flag == 'testB'" />
          <component :is="flag"></component>	//简化，不用添加testA、testB、testC..一堆 
      </div>
    </template>
    
    <script>
    import testA from "./testA"; 
    //import testB from './testB'; 
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
    testA,
        //不会提前加载，在需要用到的时候才会加载组件（异步加载）
        //异步解析组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数
        testB: () => import("./testB"),
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723061705767.png][]

![20210723061708667.png][]![20210723061710181.png][]

###  （2）添加多个 ###

![2021072306172776.png][]![20210723061728676.png][]** **//index.js必须同级目录

###  1.执行流程 ###

============================== 知识一 =================================

require.context(directory, seSubdirectories, regExp)

> 1. directory:                    要查找的文件路径
> 
> 2. useSubdirectories:    是否查找子目录
> 
> 3. regExp:                      要匹配文件的正则

**用法：**

require.context('./', true, /\.js$/);		//匹配.js

============================== 知识二 =================================

**代码分析：       **

// componentsContext拿到的就是webpackContext方法内的值
    const componentsContext = require.context('./', true, /\.js$/);
    
        webpackContext(req) {
            var id = webpackContextResolve(req);
            return __webpack_require__(id);	//返回键
    }
    componentsContext.keys()	//获取到下面的id（也就是键）
    // 获取当前目录下所有的js文件：
        0: "./index.js"	
        1: "./my-banner/index.js"
        2: "./my-button/index.js"
    3: "./my-button2/index.js"

============================ **执行流程** =================================

**定义全局自定义组件**

**index****.js**

// 引入全局自定义组件
        import './components/global'
        import Vue from 'vue'
        const componentsContext = require.context('./', true, /\.js$/);
        componentsContext.keys().forEach(component => {
            const componentConfig = componentsContext(component)
            // 兼容import export和require module.export两种规范
            const ctrl = componentConfig.default || componentConfig;
            // 加载全局组件
            if (ctrl && ctrl.name) {
                Vue.component(ctrl.name, ctrl);  //括号内的ctrl.name与ctrl相当于图片的：
                 
            }
    })

**全局组件的定义：**

**index****.js**

import main from './main.vue'
        export default main

**main****.vue**

<div>我的按钮</div>
        <script>
            export default {
                name: 'my-button',
                data(){
                    return { }
                }
            }
        </script>

这样其它页面就可以直接引用了

<my-button />

### 2.使用 ###

![20210723062015348.png][]![20210723062016896.png][]** **//index.js必须同级目录

**index****.js**

import main from './main.vue'
    export default main

**main****.vue**

**轮播图代码。。 ** **//****这里先不写了**

**index****.js**

import main from './main.vue'
    export default main

**main****.vue**

<template>
      <div>我的按钮</div>
    </template>
    
    <script>
    export default {
      name: "my-button",
      data() {
        return {};
      },
    };
    </script>

**index.js** ![20210723062100245.png][]

import Vue from 'vue'
    
    const componentsContext = require.context('./', true, /\.js$/);
    console.log(componentsContext);
    console.log(componentsContext.keys());
    
    componentsContext.keys().forEach(component => {
        const componentConfig = componentsContext(component);
        // 兼容import export和require module.export两种规范
        const ctrl = componentConfig.default默认 || componentConfig;
        if (ctrl && ctrl.name) {	// 加载全局组件
            Vue.component(ctrl.name, ctrl);  
        }
    })

**main****.js**

//定义全局组件
    Vue.component('myComponent',
    {render()
        {return <h1>hello world</h1>}
    });
    ------------------------------------- 添加 -----------------------------------------
    import './components/global'	//文件夹
    -----------------------------------------------------------------------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

**//****整个组件的信息都添加进来了**

**index.vue** ![20210723062136464.png][]

<template>
      <div>
        
    <myComponent />
    ------------------------------------- 添加 -----------------------------------------
        <my-button />
    -----------------------------------------------------------------------------------
          <button @click="flag = 'testA'">
          A组件
          </button>
          <button @click="flag = 'testB'">
          B组件
          </button>
          // <testA v-if="flag == 'testA'" />
          // <testB v-if="flag == 'testB'" />
          <component :is="flag"></component>	//简化，不用添加testA、testB、testC..一堆 
      </div>
    </template>
    
    <script>
    import testA from "./testA"; 
    //import testB from './testB'; 
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
    testA,
        //不会提前加载，在需要用到的时候才会加载组件（异步加载）
        //异步解析组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数
        testB: () => import("./testB"),
      },
    };
    </script>
    
    <style scoped>
    </style>

![20210723062152325.png][]

**index.vue** ![2021072306215612.png][]

<template>
      <div>
        
    <myComponent />
        <my-button />
    ------------------------------------- 添加 -----------------------------------------
        <my-banner />
    -----------------------------------------------------------------------------------
          <button @click="flag = 'testA'">
          A组件
          </button>
          <button @click="flag = 'testB'">
          B组件
          </button>
          // <testA v-if="flag == 'testA'" />
          // <testB v-if="flag == 'testB'" />
          <component :is="flag"></component>	//简化，不用添加testA、testB、testC..一堆 
      </div>
    </template>
    
    <script>
    import testA from "./testA"; 
    //import testB from './testB'; 
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
    testA,
        //不会提前加载，在需要用到的时候才会加载组件（异步加载）
        //异步解析组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数
        testB: () => import("./testB"),
      },
    };
    </script>
    
    <style scoped>
    </style>

![2021072306234827.png][]

## 7.keep-alive组件缓存 ##

每次切换新标签的时候，Vue 都创建了一个新的实例。

重新创建动态组件的行为通常是非常有用的，如果希望那些标签的组件实例能够被在它们第一次被创建

的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

keep-alive: 是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素

include: 只有匹配的组件才会缓存,    符合条件：字符串/正则

exclude: 任何组件都不会缓存，      符合条件：字符串/正则

**index.vue** ![20210723062411508.png][]

![202107230624151.png][]

![20210723062417951.png][]//这个点击的作用本来是产生随机数

![20210723062423930.png][]//但是每次点击都是这个值（缓存、保存）

**index.vue** ![20210723062431596.png][]

<template>
      <div>
        
    <myComponent />
        <my-button />
        <my-banner />
          <button @click="flag = 'testA'">
          A组件
          </button>
          <button @click="flag = 'testB'">
          B组件
          </button>
          // <testA v-if="flag == 'testA'" />
          // <testB v-if="flag == 'testB'" />
    
          
          //include: 只有匹配的组件才会缓存	符合条件：字符串/正则 
          //exclude: 除了该值不缓存，其它缓存		符合条件：字符串/正则
    ------------------------------------ 添加 ------------------------------------------
          <keep-alive include="testA">	//只有testA会缓存
            <component :is="flag"></component>
          </keep-alive>
          <keep-alive include="testA,testB">
            <component :is="flag"></component>
          </keep-alive>
    
          <keep-alive exclude="testA">	//除了testA不缓存，其它缓存
            <component :is="flag"></component>
          </keep-alive>
    -----------------------------------------------------------------------------------
      </div>
    </template>
    
    <script>
    import testA from "./testA"; 
    //import testB from './testB'; 
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
    testA,
        //不会提前加载，在需要用到的时候才会加载组件（异步加载）
        //异步解析组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数
        testB: () => import("./testB"),
      },
    };
    </script>
    
    <style scoped>
    </style>

**index.vue** ![20210723062453111.png][]

<template>
      <div>
        
    <myComponent />
        <my-button />
        <my-banner />
    -------------------------------- 添加 黑色部分 --------------------------------------
          <button @click="flag = 'testA'" :class="flag == 'testA' ? 'selected' : ''">
          A组件
          </button>
          <button @click="flag = 'testB'" :class="flag == 'testB' ? 'selected' : ''">
          B组件
          </button>
    -----------------------------------------------------------------------------------
          // <testA v-if="flag == 'testA'" />
          // <testB v-if="flag == 'testB'" />
    
          
          //include: 只有匹配的组件才会缓存	符合条件：字符串/正则 
          //exclude: 除了该值不缓存，其它缓存		符合条件：字符串/正则
          <keep-alive include="testA">	//只有testA会缓存
            <component :is="flag"></component>
          </keep-alive>
          <keep-alive include="testA,testB">
            <component :is="flag"></component>
          </keep-alive>
    
          <keep-alive exclude="testA">	//除了testA不缓存，其它缓存
            <component :is="flag"></component>
          </keep-alive>
      </div>
    </template>
    
    <script>
    import testA from "./testA"; 
    //import testB from './testB'; 
    
    export default {
      data() {
        return {
          flag: "testA",
        };
      },
      methods: {},
      components: {
    testA,
        //不会提前加载，在需要用到的时候才会加载组件（异步加载）
        //异步解析组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数
        testB: () => import("./testB"),
      },
    };
    </script>
    
    <style scoped>
    ------------------------------------ 添加 ------------------------------------------
    .selected {
      background: #f60;	//橙色
    }
    -----------------------------------------------------------------------------------
    </style>

//先点击B组件![20210723062507408.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]//说明了自动默认是第一个

//这也说明了点击另一个**路由地址**时，之前路由内整个内容不会缓存

![20210723062520756.png][]![20210723062522499.png][] //keepAlive

**App.****vue**

<template>
      <div id="app">
        <Nav />
    <div>
    ------------------------------------ 添加 ------------------------------------------
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />	//路由出口
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" />	//路由出口
    -----------------------------------------------------------------------------------
        </div>
      </div>
    </template>
    
    <script>
    import Nav from "./views/Nav";
    
    export default {
      data() {
        return {};
      },
      components: {
        Nav,
      },
    };
    </script>
    <style>
    @import "./assets/css/index.css";
    #app {
      height: 100%;
    }
    </style>

![20210723062548453.png][]

![20210723062550600.png][]//缓存

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][]//值也没变

如果想要实现刷新也不变，只能本地存储方式

=====================================================================

<button @click="flag='testA'">a</button>
        <button @click="flag='testB'">b</button>
        <button @click="flag='testC'">c</button>
        import testA from './testA.vue'; 
        import testB from './testB.vue'; 
        import testC from './testC.vue'; 
        data(){
            return{
                flag:'testA'
            }
        },
    -----------------------------------------------------------------------------------
        // 只有组件testA才会缓存
    <keep include='testA'>
        <component :is="flag"></component>
    </keep - alive>
    -----------------------------------------------------------------------------------
        
        <keep-alive include='testA,testB'>
            <component :is="flag"></component>
    </keep-alive>
    -----------------------------------------------------------------------------------
        
        <keep-alive exclude='testA,testC'>
            <component :is="flag"></component>
        </keep-alive>

对于路由切换后想缓存组件的状态，这种如何处理咧？

<keep-alive>
        
        <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        
        <router-view v-if="!$route.meta.keepAlive" />
     
        const routes = [
            {
                path: '/',
                redirect: '/about'
            },
            {
                path: '/about',
                name: 'About',
                component: () => import('../views/About.vue')
            },
            {
                path: '/tab',
                name: 'tab',
                meta: {
                    keepAlive: true // 需要被缓存
                },
                component: () => import('../views/Tab.vue')
            },
        ];

![202107230627008.png][]

当进入到TAB切换时会缓存当前是TAB选项的状态，再次进入还是‘标题4’

#  #

[20210723061302918.png]: /images/20220829/2136a55154cf4b59855af0bf4ca527b2.png
[20210723061447425.png]: /images/20220829/20ae5ac026484014b8a714a99c692614.png
[20210723061449674.png]: /images/20220829/bee8061b7e8c4a30ac2a28556443bb8a.png
[20210723061520226.png]: /images/20220829/583f82088b99445cadbfe70e3b4fbe17.png
[20210723061522567.png]: /images/20220829/883c1e45800943a9abcd6eaae056e484.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20220829/445886f331da400b8755222c75ae2258.png
[20210723061600323.png]: /images/20220829/b3dff0b38e584b449fadf18c986606fc.png
[20210723061603572.png]: /images/20220829/03bb8d008da447c087070a628a653406.png
[20210723061705767.png]: /images/20220829/0b5c7e283d714b7eb2743bb48e86b11d.png
[20210723061708667.png]: https://img-blog.csdnimg.cn/20210723061708667.png
[20210723061710181.png]: /images/20220829/28151e475eca4201a124c69616c23c0d.png
[2021072306172776.png]: https://img-blog.csdnimg.cn/2021072306172776.png
[20210723061728676.png]: /images/20220829/157e34b23bbd4d46821e3c7c446390a8.png
[20210723062015348.png]: https://img-blog.csdnimg.cn/20210723062015348.png
[20210723062016896.png]: /images/20220829/3f69b09488c84a1b95b8ee56fbc6c043.png
[20210723062100245.png]: /images/20220829/48c3d011328a433d861b2bf98797ffa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/5679afad25a942b18e1b9f9f09b6d1da.png
[20210723062136464.png]: /images/20220829/7453c2658aab40b7b5ede03d5e3b899c.png
[20210723062152325.png]: /images/20220829/26d8d98e48c94420b2a35168ee15b430.png
[2021072306215612.png]: /images/20220829/a3f5aa6388e048d18f92796a72db34df.png
[2021072306234827.png]: /images/20220829/1469d6dfe4224916ab24c469e887f19a.png
[20210723062411508.png]: /images/20220829/71c476d20c0c45e3bd5997e034abdba0.png
[202107230624151.png]: /images/20220829/cafc48dffab345ca9a6fc65af7be3d90.png
[20210723062417951.png]: /images/20220829/dd5fd5adeb1b462db4774ada9d0dc658.png
[20210723062423930.png]: /images/20220829/cb1b3e7138e54d3da391c16979f9009a.png
[20210723062431596.png]: /images/20220829/c8e1544fca2740be9ba66bd45bfe38d9.png
[20210723062453111.png]: /images/20220829/1cd6783156084f029f5e0e147e4f86a4.png
[20210723062507408.png]: /images/20220829/dee66344d1ec48f895be2a342d6fe128.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/6a646dd25a734f9383cf7b893f5ebc7b.png
[20210723062520756.png]: https://img-blog.csdnimg.cn/20210723062520756.png
[20210723062522499.png]: /images/20220829/6ee804311aa84e11af44e00474836bc6.png
[20210723062548453.png]: /images/20220829/02bb77bc48e34cc492a5c4b7a54eb807.png
[20210723062550600.png]: /images/20220829/4071b000be36439c874d05ff7b121768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/dfb21a45c3e44a1aa701c26a1990c5ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/c8f9c9d2a6044f848df03dd7fc7ef540.png
[202107230627008.png]: /images/20220829/bf615317d2fd4854b9f519074b62d54f.png