vue3中自定义指令的使用

1.注册

（1）全局自定义指令

在main.js中使用app.directive()进行注册，其语法为app.directive(自定义指令名称,{钩子函数(节点，绑定对象){逻辑操作})

javascript 复制代码

const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 中时......
  mounted(el) {
    // 聚焦元素
    el.focus()
  }
})

（2）局部自定义指令

组合式Api中，在 <script setup> 中，任何以 v 开头的驼峰式变量，都会被自动识别为局部自定义指令 。模板中使用时，将驼峰转为短横线并加上 v- 前缀。

javascript 复制代码

<script setup>
// 变量名必须以 v 开头，驼峰式
const vFocus = {
  mounted(el) {
    el.focus()
  }
}
</script>

<template>
  <input v-focus placeholder="自动聚焦" />
</template>

选项式Api中，在组件的 directives 选项中注册，语法为 directives: { 指令名称：``{ 钩子函数: function (Dom节点, 绑定对象, 虚拟节点, 上一个虚拟节点) { 逻辑操作 }``} }。

javascript 复制代码

<template>
    <el-input v-model="kanno.name" v-focus />
<template/>

export default {
  name: 'kanno',
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus(); // 获取焦点
      }
    }
  },
  data() {
    return {
      kanno: 'kanno',
    };
  },
  methods: {},
  mounted() {
    console.log('kanno mounted');
  },
};

2.钩子函数

指令定义对象可以提供的钩子函数（均为可选）：

created：新增。在绑定元素的属性或事件监听器被应用之前调用。
beforeMount：指令第一次绑定到元素并且在挂载父组件之前调用
mounted：在绑定元素的父组件被挂载后调用
beforeUpdate：新增。在更新包含组件的 VNode 之前调用。
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用
beforeUnmount：新增。在绑定元素的父组件卸载之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时调用

3.钩子函数参数

钩子函数的参数与 Vue 2 类似，主要有 el 和 binding。
- el：指令绑定的 DOM 元素。
- binding：一个对象，包含：
  - instance：使用指令的组件实例 （Vue 3 新增，用于访问组件上下文，替代 Vue 2 中的 vnode.context）。
  - value：传递给指令的值。
  - oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。
  - arg：传递给指令的参数。
  - modifiers：包含修饰符的对象。
  - （注意：Vue 3 的 binding 对象中没有 expression 属性）

vue2中自定义指令的使用-CSDN博客