Vue 自定义命令

适用范围:

1. 用于封装一个功能
   1. 功能与组件周期相关
2. 运用于组件模板中的某个原生html标签

梗概:

1. 在组件内部声明自定义命令
2. 在组件模板中的某个基础dom元素中, 使用v-自定义名字:实参1="实参2"来调用自定义命令
   1. 两个实参都可以是动态的, 即v-自定义名字:[变量1]="变量2"
   2. 实参2可以是一个包含多个属性的对象
   3. 当然也可以在某个子组件上使用自定义命令, 但是不推荐
      1. 会自动把这个自定义命令绑定在子组件模板中的唯一根元素
         1. 如果根元素不唯一, 则自定义命令失效

语法:

1. 声明一个自定义命令:

1.1. 如果通过单文件的增强组合式api:

child::Vue 单文件组合式api 声明自定义命令

1.2. 如果通过组合式api:

child::Vue directive()方法

2. 在声明体中可以使用的api:

2.1. 可用的特殊生命周期api:

声明的自定义命令体中, 可以使用以下钩子函数:

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。
• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
• mounted：在绑定元素的父组件被挂载后调用。
• beforeUpdate：在更新包含组件的 VNode 之前调用。
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
• beforeUnmount：在卸载绑定元素的父组件之前调用
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

3.1. 钩子函数的可用特殊参数:

在自定义命令体的声明中, 钩子函数可以接受以下特殊参数

1. el, 调用该命令的html元素
2. binding, 一个包含两个属性的对象:
   1. arg: 自定义命令的第一个参数, 即冒号后面的参数
   2. value: 自定义命令的第二个参数, 即等号后面的参数