Vue动态组件ampampamp插槽ampampamp自定义指令

　　一、动态组件
　　1. 什么是动态组件
　　动态组件指的是 动态切换组件的显示与隐藏 。
　　2. 如何实现动态组件渲染
　　vue 提供了一个内置的    组件， 专门用来实现动态组件的渲染 。示例代码如下：
　　3. 使用 keep-alive 保持状态
　　默认情况下，切换动态组件时 无法保持组件的状态 。此时可以使用 vue 内置的    组件保持动态组件的状态。示例代码如下：
　　4. keep-alive 对应的生命周期函数
　　当组件 被缓存 时，会自动触发组件的  deactivated  生命周期函数。
　　当组件 被激活 时，会自动触发组件的  activated  生命周期函数。
　　5. keep-alive 的  include  属性
　　include 属性用来指定：只有 名称匹配的组件 会被缓存。多个组件名之间使用 英文的逗号 分隔：
　　二、插槽
　　1. 什么是插槽
　　插槽 （ Slot ）是 vue 为 组件的封装者 提供的能力。允许开发者在封装组件时，把 不确定的 、 希望由用户指定的部分 定义为插槽。
　　可以把插槽认为是组件封装期间，为用户预留的 内容的占位符 。
　　2. 体验插槽的基础用法
　　在封装组件时，可以通过    元素 定义插槽 ，从而 为用户预留内容占位符 。示例代码如下：
　　2.1 没有预留插槽的内容会被丢弃
　　如果在封装组件时 没有预留任何  插槽 ，则用户提供的任何 自定义内容 都 会被丢弃 。示例代码如下：
　　2.2 后备内容
　　封装组件时，可以为预留的  插槽提供 后备内容 （默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。示例代码如下：
　　3. 具名插槽
　　如果在封装组件时 需要预留多个插槽节点 ，则需要为每个  插槽指定 具体的 name 名称 。这种 带有具体名称的插槽 叫做＂具名插槽＂。示例代码如下：
　　注意：没有指定 name 名称的插槽，会有隐含的名称叫做 ＂ default ＂。
　　3.1 为具名插槽提供内容
　　在向具名插槽提供内容的时候，我们可以在一个    元素上使用  v-slot  指令，并以 v-slot 的参数的形式提供其名称。示例代码如下：
　　3.2 具名插槽的简写形式
　　跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 ( v-slot: ) 替换为字符  # 。例如  v-slot: header可以被重写为  # header：
　　4. 作用域插槽
　　在封装组件的过程中，可以为预留的  插槽绑定 props 数据，这种 带有 props 数据的   叫做＂ 作用域插槽 ＂。示例代码如下：
　　4.1 使用作用域插槽
　　可以使用  v-slot:  的形式，接收作用域插槽对外提供的数据。示例代码如下：
　　4.2 解构插槽 Prop
　　作用域插槽对外提供的数据对象，可以使用 解构赋值 简化数据的接收过程。示例代码如下：
　　三、自定义指令
　　1. 什么是自定义指令
　　vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。
　　2. 自定义指令的分类
　　vue 中的自定义指令分为两类，分别是：
　　⚫  私有 自定义指令
　　⚫  全局 自定义指令
　　3. 私有自定义指令
　　在每个 vue 组件中，可以在  directives  节点下声明 私有自定义指令 。示例代码如下：
　　4. 使用自定义指令
　　在使用自定义指令时，需要加上  v-  前缀。示例代码如下：
　　5. 为自定义指令 动态绑定参数值
　　在 template 结构中 使用自定义指令 时，可以通过等号（ = ）的方式，为当前指令 动态绑定参数值 ：
　　6. 通过  binding  获取指令的参数值
　　在声明自定义指令时，可以通过形参中的 第二个参数 ，来接收指令的参数值：
　　7. update 函数
　　bind 函数 只调用 1 次 ：当指令第一次绑定到元素时调用， 当 DOM 更新时 bind 函数不会被触发 。  update  函数会在 每次 DOM 更新时 被调用。示例代码如下：
　　8. 函数简写
　　如果  insert  和 update  函数中的 逻辑完全相同 ，则 对象格式 的自定义指令可以简写成 函数格式 ：
　　9. 全局自定义指令
　　全局共享的自定义指令需要通过＂ Vue.directive() ＂进行声明，示例代码如下：
　　总结：
　　① 能够掌握  keep-alive  元素的基本使用
　　⚫  标签、include 属性
　　② 能够掌握 插槽 的基本用
　　⚫  标签、具名插槽、 作用域插槽 、后备内容
　　③ 能够知道如何 自定义指令
　　⚫ 私有自定义指令 directives: { }
　　⚫ 全局自定义指令 Vue.directive()
　　更多VUE内容：
　　前端框架Vue2+Vue3全套视频