Vue2的动态组件

动态组件

实现动态组件渲染

vue提供给一个内置的component组件，专门用来实现动态组件的渲染

  //通过 is 属性，动态指定要渲染的组件
  <component :is="comName"></component>

  //点击按钮，动态切换组件的名称
  <button @click="comName = 'Left'">展示 Left 组件</button>
  <button @click="comName = 'Right'">展示 Right 组件</button>

	data() {
    return {
    	//当前要渲染的组件名称
      comName: 'left'
    }
  }

component标签为vue内置，作用为组件的占位符

is属性的值表示要渲染的组件的名称

is属性的值，应该是组件在components节点下的注册名称

keep-alive

通过component标签动态渲染的组件，在切换时会进行销毁，当切换回来时才重新创建

因此其中的数据并不会保留

此时可以通过keep-alive标签包过进行缓存，保证组件不被销毁

  <keep-alive>
	<component :is="comName"></component>
  </keep-alive>

默认在keep-alive标签内包裹的所有组件都不会销毁

可以通过添加属性进行修改

include

include属性用来指定只有名称匹配的组件会被缓存，多个组件名之间使用英文逗号分隔

  <keep-alive include="MyLeft"> 
  <!-- 此时include中的值为名称匹配的组件，
  当组件export default中没有name属性时include的值为组件注册时的名称，
  当组件export default中有name属性时include的值就必须为name属性的值 -->
	<component :is="comName"></component>
  </keep-alive>

此时只有include中的组件才会被缓存，其他按默认进行销毁创建

exclude

exclude属性用来指定哪些组件不需要被缓存，多个组件名之间使用英文逗号分隔

  <keep-alive exclude="MyRight"> 
  <!-- 此时exclude中的值为名称匹配的组件，
  当组件export default中没有name属性时exclude的值为组件注册时的名称，
  当组件export default中有name属性时exclude的值就必须为name属性的值 -->
	<component :is="comName"></component>
  </keep-alive>

此时只有exclude中的组件不会被缓存，其他按默认进行缓存

注： include与exclude这两个属性不能同时使用

正则

include和exclude属性还支持多种写法

   <!-- 逗号分隔字符串 -->
   <keep-alive include="a,b"> 
	<component :is="comName"></component>
   </keep-alive>

   <!-- 正则表达式（使用'v-bind'） -->
   <keep-alive :include="/a|b/"> 
	<component :is="comName"></component>
   </keep-alive>

   <!--  数组（使用'v-bind'） -->
   <keep-alive :include="['a', 'b']"> 
	<component :is="comName"></component>
   </keep-alive>

注：

include和exclude的值为组件自身的name属性 （并非引入时的命名，是组件内部的name属性）

如果name属性选项不可用，才匹配它的局部注册名称（父组件components选项的键值）

匿名组件不能被匹配

keep-alive对应的生命周期函数

keep-alive会对组件进行缓存及激活，同样具有生命周期函数

当组件被缓存时,会自动触发组件的deactivated生命周期函数

当组件被激活时,会自动触发组件的activated生命周期函数