vue入门之05-动态组件 & 插槽 & 自定义指令
动态组件 & 插槽 & 自定义指令
1. 动态组件
1.1 什么是动态组件
动态组件指的是动态切换组件的显示与隐藏。
1.2 如何实现动态组件渲染
vue 提供了一个内置的 专门用来实现动态组件的渲染。示例代码如下：
App.vue
App 根组件
Left.vue
Left 组件 --- {{ count }}
Right.vue
Right 组件
实验结果 发现当你轮流点击俩个按钮时 无法保存组件的状态 组件不会被缓存
1.3 使用 keep-alive 保持状态
默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组
件的状态。示例代码如下：
App.vue
在left.vue中添加几个函数进行验证 （跟created同级别）
实验结果
结论
.keep-alive 对应的生命周期函数
当组件被缓存时，会自动触发组件的deactivated 生命周期函数。
当组件被激活时，会自动触发组件的activated生命周期函数。
1.4 keep-alive 的include属性
include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：
1.5 动态组件的适用范围
可以进行导航栏的切换以及移动端网页的切换
点击left 显示left组件
点击right 显示right组件内容
2. 插槽
2.1 什么是插槽
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
2.2 插槽的基本用法
在封装组件时，可以通过 元素定义插槽，从而为用户预留内容占位符。示例代码如下：
右边这个组件中留了一个slot插槽
在左边使用这个组件时，中间用户自定义添加的东西加入到右边这个插槽中
注意
如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃
2.3 后备内容
封装组件时，可以为预留的 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。示例代码如下：
Left 组件
这是 default 插槽的后备内容
App.vue
默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中
1. 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令
2. v-slot: 后面要跟上插槽的名字 -->
3. v-slot: 指令不能直接用在元素身上，必须用在 template 标签上 -->
4. template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素
5. v-slot: 指令的简写形式是 #
// 用户自定义的内容会寻找一个名字未default的slot中， 进行插槽
这是在 Left 组件的内容区域，声明的 p 标签
2.4 具名插槽
如果在封装组件时需要预留多个插槽节点，则需要为每个 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下：
注意：没有指定 name 名称的插槽，会有隐含的名称叫做 “default”。
向具体的插槽添加内容
2.5 作用域插槽
在封装组件的过程中，可以为预留的 插槽绑定 props 数据，这种带有 props 数据的 叫做“作用域插槽”。示例代码如下：
父组件中
子组件
父组件中可以通过v-slot=content的缩写
#content="msg"来接收子组件的msg数值
2.6 解构插槽
假如
子组件中有俩个值进行传送
父组件
指定接收user的值 不接收items的数值
3 自定义指令
3.1 什么是自定义指令
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。
3.2 自定义指令的分类
vue 中的自定义指令分为两类，分别是：
私有自定义指令全局自定义指令
3.3 私有自定义指令
在每个 vue 组件中，可以在 directives节点下声明私有自定义指令。示例代码如下：
// 私有自定义指令的节点
directives: {
// 定义名为 color 的指令，指向一个配置对象
color: {
// 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
// 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
bind(el, binding) {
console.log('触发了 v-color 的 bind 函数')
el.style.color = binding.value
},
}
}
3.3.1 使用自定义指令
在使用自定义指令时，需要加上v-前缀。示例代码如下：
3.3.2 为自定义指令动态绑定参数值
在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值：
3.3.3通过 binding 获取指令的参数值
在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：
3.3.4 update 函数
bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用。示例代码如下：
3.3.5 全局自定义指令
全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：
全局指令放在App.vue中
4 自定义事件
4.1 什么是自定义事件
在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件
4.2 自定义事件的 3 个使用步骤
在封装组件时：
① 声明自定义事件
②触发自定义事件
在使用组件时：
③ 监听自定义事件
4.2.1 声明自定义事件
开发者为自定义组件封装的自定义事件，必须事先在 emits 节点中声明，示例代码如下：
4.2.2 触发自定义事件
在 emits 节点下声明的自定义事件，可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发，示例代码如下
4.2.3 监听自定义事件
在使用自定义的组件时，可以通过 v-on 的形式监听自定义事件。示例代码如下：
4.3 自定义事件传参
在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参，示例代码如下：
