动态组件指的是动态切换组件的显示与隐藏。
实现动态组件的渲染
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>
