Vue第四天—动态组件、插槽、自定义指令

目录

1. 动态组件

1.1 什么是动态组件

1.2 如何实现动态组件渲染

1.3 使用 keep-alive 保持状态

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

1.5 keep-alive 的 include 属性

2. 插槽

2.1 什么是插槽

2.2 体验插槽的基础用法

2.2.1 没有预留插槽的内容会被丢弃

2.2.2 后备内容

2.3 具名插槽

2.3.1 为具名插槽提供内容

2.3.2 具名插槽的简写形式

2.4 作用域插槽

2.4.1 使用作用域插槽

2.4.2 解构插槽 Prop

3. 自定义指令

3.1 什么是自定义指令

3.2 自定义指令的分类

3.3 私有自定义指令

3.4 使用自定义指令

3.5 为自定义指令动态绑定参数值

3.6 通过 binding 获取指令的参数值

3.7 update 函数

3.8 函数简写

3.9 全局自定义指令

---

1. 动态组件

1.1 什么是动态组件

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

1.2 如何实现动态组件渲染

1.3 使用 keep-alive 保持状态

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

1.5 keep-alive 的 include 属性

2. 插槽

2.1 什么是插槽

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

2.2 体验插槽的基础用法

2.2.1 没有预留插槽的内容会被丢弃

2.2.2 后备内容

2.3 具名插槽

2.3.1 为具名插槽提供内容

2.3.2 具名插槽的简写形式

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

2.4 作用域插槽

2.4.1 使用作用域插槽

2.4.2 解构插槽 Prop

3. 自定义指令

3.1 什么是自定义指令

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

3.2 自定义指令的分类

vue 中的自定义指令分为两类，分别是：

⚫ 私有自定义指令

⚫ 全局自定义指令

3.3 私有自定义指令

3.4 使用自定义指令

3.5 为自定义指令动态绑定参数值

3.6 通过 binding 获取指令的参数值

3.7 update 函数

3.8 函数简写

3.9 全局自定义指令