vue2中自定义指令的使用

1.注册

（1）全局自定义指令

在 main.js 中使用 Vue.directive() 进行注册，其语法为 Vue.directive(指令名称, { 钩子函数: function (Dom节点, 绑定对象, 虚拟节点, 上一个虚拟节点) { 逻辑操作 } })。

javascript 复制代码

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时......
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

（2）局部自定义指令

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

javascript 复制代码

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

2.使用

在需要使用全局自定义指令的组件中可直接使用，无需额外引用。例如，全局自定义指令 v-focus 可使输入框自动获取焦点。

bash 复制代码

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

3.钩子函数

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

bind：只调用一次，指令第一次绑定到元素时调用。可进行一次性初始化设置。
inserted：被绑定元素插入父节点时调用（父节点存在即可，不一定要在文档中）。
update：所在组件的 VNode 更新时调用，可能发生在子 VNode 更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

4.钩子函数参数

指令钩子函数会被传入以下参数（el、binding、vnode、oldVnode）：

el：指令所绑定的 DOM 元素，可直接操作。
binding：一个对象，包含：
- name：指令名，不带 v- 前缀。
- value：指令的绑定值。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 中可用。
- expression：字符串形式的指令表达式。
- arg：传给指令的参数（如 v-my-directive:foo 中的 "foo"）。
- modifiers：包含修饰符的对象（如 v-my-directive.foo.bar 中的 { foo: true, bar: true }）。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 中可用。

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