vue组件辅助

• 动态模板
• 异步组件
• 组件缓存（刷新丢失）
• 全局组件的定义

动态模板

<component :is="flag"> </component>
<button @click="flag = TestB"> </button>
<button @click="flag = TestA"> </button>
import TestA from 'xxx'
data() {
   return {
      flag: 'TestA'
   }
}

可通过 动态渲染模板

异步组件

components: {
  'TestA': () => import('xxx');
}

当用到的时候在引入，不会在一开始就引入

组件缓存（刷新丢失）

1. keep-alive

<keep-alive> 
   <component :is="flag"></component>
<keep-alive>
import TestA from 'xxx'
data() {
   return {
      flag: 'TestA',
   }
}

当通过tab切换组件（上面所说的动态模板，切换组件）的时候，组件中的内容不会改变。但是通过路由跳转的时候，不能够保存

2. include: 匹配成功，才会缓存
   exclude：添加了的，不会缓存

//只有TestA存在缓存
<keep-alive include="TestA"> 
   <component :is="flag"></component>
   <component :is="flag1"></component>
<keep-alive> 
//除了TestA组件都有缓存
<keep-alive exclude="TestA"> 
   <component :is="flag"></component>
   <component :is="flag1"></component>
<keep-alive>
import TestA from 'xxx'
import TestB from 'xxx'
data() {
   return {
      flag: 'TestA',
      flag1: 'TestB'
   }
}

3. 路由缓存

<keep-alive > 
   <router-view v-if="$route.meta.keepAlive"> </router-view>
<keep-alive>


//router.js文件中
{
  path:'/',
  name: 'About',
  component: () => import('xxx');
  meta: {
     keepAlive:true;   // true:需要缓存  false:不需要缓存
  }
}

全局组件的定义

1. myComponent:组件名
   第二个参数：组件渲染的内容

//main.js中
Vue.component('myComponent',{render() {return <h1>hello world</h1>}})

但这种方式，时用性不高，内容有时可能很长

2. 将组件放到component/global文件夹下 每个组件用一个文件夹装，该文件夹中有两个文件，一个main.vue文件，用来定义组件，一个index.js文件，用来导出文件，在global文件夹下，又建一个index文件，统一将文件注册到全局

//main.js
// 引入全局自定义组件 import './components/global'

//global文件夹下的index.js
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); 
   } 
})

解析：
require.context(directory, useSubdirectories, regExp)

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

componentsContext.keys()
//当前目录下所有的js文件
0: “./index.js”
1: “./my-banner/index.js”
2: “./my-button/index.js”
3: “./my-button2/index.js”

注意：main.vue定义组件中，组件一定要写**name,**不然导出来，没有名字

标签：index,缓存,7.27,alive,js,TestA,组件,import,keep
来源： https://blog.csdn.net/qq_43604714/article/details/119155704