「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

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

实现动态组件的渲染

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

<template>
	// component组件使用的时候可以看作是一个占位的符号
	<component is=""></component>
	// 组件中有个is属性，is属性指定哪个组件的名称，就会把相应的组件渲染到这个位置
 // 也可以使用v-bind动态的指定这个属性的值
</template>

keep-alive组件

keep-alive是Vue.js的一个内置组件，他能够将不活动的组件保存在内存中，而不是将其直接销毁。它是一个抽象的组件，不会被渲染到真实的DOM中，也不会出现在父组件链中。keep-live主要用于保留组件状态或避免重新渲染。

动态组件在组件切换(修改is属性)的时候，之前的组件会被销毁掉，再次创建同名组件的时候又是一个新的组件。要在切换组件的时候保持当前组件的状态，可以使用keep-alive组件包裹，可以使得组件被切换了也不会被销毁

<!-- 在哪使用组件，就在哪包裹keep-alive -->
<keep-alive>
	<component :is="comName"></component>
</keep-alive>

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

当组件被缓存（失活 ）时，会自动触发组件的deactivated生命周期函数

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

keep-alive的include属性

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

// 只有组件Left才会被keep-alive缓存
<keep-alive include="Left">		
  <component :id="comName"></component>
</keep-alive>

此外，keep-alive还有一个exclude属性，用处与include相反，是除了被指定的组件外，其他的组件都缓存

注意： include和exclude属性不能同时使用

插槽slot

插槽vue为组件的封装者提供的能力，允许开发者在封装组件的时候，把不确定的、希望由用户指定的部分定义为插槽

// 定义插槽 使用<slot>
  
// 在使用Left组件的时候，在其中间插入代码时不会生效
<Left> 
  <!-- 默认情况下，下面的内容会被填充到名字为default的插槽中 -->
  <p>这是在Left组件的内容区域，声明的p标签</p>
</Left>
  
// 解决办法-->在声明Left组件时，设置插槽slot
  
// 在Left组件中
<template>
	<div class="left-container">
  	<h1>Left组件</h1>      
		<hr>   
    
    <!-- 声明一个默认插槽 -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会显示</slot>
    
  </div>
	
</template>

声明了插槽后，使用Left组件时，在Left标签内部写入的代码会被自动填充到Left组件中插槽的位置

具名插槽

vue官方规定：每一个slot插槽都要有一个name名称，设置了name名称的插槽就叫做 具名插槽

<slot name="one"></slot>
<!-- 若省略了slot的name属性，则默认为default -->

v-slot指令

若要 指定某部分内容 填充到 指定的插槽中，要使用v-slot指令

语法：v-slot: 插槽的名称

注意：v-slot指令不能直接用在元素上，只能用在template标签上

<template>
	<div class="app-container">
  	<h1>App根组件</h1>      
		<hr>   
    
    <div class="box">
      <!-- 在使用Left组件的时候 -->
      <Left>
        <!-- 将以下内容填充到名为one的插槽中 -->
        <template v-slot:one>
          <p>这是在Left组件的内容区域声明的p标签</p>
				</template>

  		</Left>

  	</div>

  </div>
	
</template>

注意点：

• v-slot: 还可以简写为一个井号 #
• 可以在slot标签内部写入内容 作为默认内容，当用户没有指定插槽的内容时就会展示默认内容

作用域插槽(插槽设置自定义属性)

在封装组件的时候，为slot标签提供属性对应的值(设置自定义属性)，这样的插槽就叫做 "作用域插槽"

当数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定的时候，就可以使用作用域插槽来实现

// 在Left组件中
<!-- 在content插槽中，设置msg属性并赋值 -->
<slot name="content" msg="hello"></slot>
<!-- 自定义属性msg的内容希望在使用组件的时候能被访问，相当于是子传父 -->

<!-- 使用Left组件 -->
	<Left>
    <!-- 指定插槽的时候可以等号接收一个形参 -->
  	<template #content="obj">		
			<div>
  		  <p> {{ obj }} </p>		
  		  <!-- 渲染这个形参，得到的是一个保存着上面插槽中预留信息的 对象  -->
  		  <p> {{ obj.msg }} </p>		<!-- 渲染得到hello -->
  		</div>
		</template>

  </Left>

如果使用的是默认插槽，则需要使用slot-scope属性来接收插槽传递的数据

<!-- 在默认插槽中，设置games属性并赋值 -->
<slot game="minecraft"></slot>

<Left>
  <template slot-scope="obj">
		<div>
    	<p> {{ obj.game }} </p>		<!-- 渲染得到minecraft-->
    </div>
  </template>
</Left>

作用域插槽 除了可以直接设置自定义属性并赋值以外，还可以使用v-bind动态绑定属性值

<slot name="content" msg="hello" :user="userinfo"></slot>

<script>
	export default {
  	data(){
    	return {
      	userinfo: {
        	name: '张三',
          age: 18
        }
      }
    }
  }
</script>

作用域插槽的解构赋值

在使用插件，设置形参接收插槽预留的数据时，可以使用解构赋值来接收需要使用的数据

<template #content="obj">		
	<div>
    <p> {{ obj }} </p>		
    <!-- 渲染这个形参，得到的对象有两个属性，一个msg一个user -->
    <!-- msg值为hello，user值为就是data中userinfo的对象 -->
    
  </div>
</template>
-------------------------------------------------------------
<!-- 接收数据的时候使用结构赋值获取需要的属性 -->
<template #content="{msg, user}">		
	<div>
    <p> {{ msg }} </p>		<!-- 渲染得到hello -->
    <p> {{ user }} </p>		<!-- 渲染得到userinfo -->
  </div>
</template>

​

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖