动态模板

<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');
}

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

组件缓存（刷新丢失）

keep-alive

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

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

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'
   }
}

路由缓存

<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:不需要缓存
  }
}

全局组件的定义

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

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

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

将组件放到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); 
   } 
})