vue动态组件

• 动态组件指的是动态切换组建的显示与隐藏

component 标签

• vue提供一个内置的`组件`，专门实现动态组件的渲染
• 其实就是一个组件的占位符

---

• 简单实例
• 通过绑定注册的组件名称来动态切换组件显示

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
	  <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
	components: {
		Left,
		Right
	},
	data() {
		return {
			comName: 'Right'
		}
	},
} 
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

keep-alive的使用

• 切换组件之后被隐藏的组件被干掉之后，数据被重置了

• keep-alive防止组件在隐藏时不被销毁，包裹住想要缓存的组件

keep-alive>
<component :is=“comName”>
</keep-alive>

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
	  <keep-alive>
		  <component :is="comName"></component>
	  </keep-alive>
    </div>
	<div>
		<button @click="comName = 'Left'">显示Left组件</button>
		<button @click="comName = 'Right'">显示Right组件</button>
	</div>
   </div>
</template>
 

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
	components: {
		Left,
		Right
	},
	data() {
		return {
			comName: 'Right'
		}
	},
} 
</script>

keep-alive对应的生命周期

只有组件添加了keep-alive时才会有这两个生命周期

• 对应的组件被隐藏了触发 deactivated

deactivated() {
	console.log("组件被缓存了");
},

• 对应的组件被隐藏了触发 activated
• 组件第一次被执行的时候create和activated都会被执行

activated() {
	console.log("组件被激活了");
}

keep-alive的include和exclude（不能同时使用）

• 默认被标签包裹的所有组件都会被缓存
• include多个组件时用逗号分割

 <keep-alive include="Right,Left">
  	<component :is="comName"></component>
 </keep-alive>

• exclude和include不能一起使用

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

组件注册名称和组件声明时的name的区别

• 子组件内如果声明了name为第一优先级

<script>
export default {
	name:'MyRight'
}
</script>

• 如果子组件没有声明name则以父组件内注册的名字
• 注册名称只是为了我们以标签的方式使用

export default {
	components: {
		Right
	}
} 
</script>