vue自定义指令—directive详解

时间：2025-01-21 07:15:13

Vue中内置了很多的指令，如v-model、v-show、v-html等，有时候我们想为元素附加一些特别的功能，这些指令并不能满足我们，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。

()
第一个参数是指令的名字（不需要写上v-前缀）
第二个参数可以是对象数据，也可以是一个指令函数

例如 页面有个input 想让页面打开input框就获取焦点 就可以这样写(该例子来自官网)

自定义指令有两种方法全局自定义指令与局部自定义指令

定义全局自定义指令

  1. 全局自定义指令 新建src/directives/文件
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
  1. 在中全局引入
import Focus from '@/directive/'
Vue.use(Focus)

局部指令的定义方法 在组件内部

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

你在模板中可以这样应用

<input v-focus>

钩子函数

自定义组件也有钩子函数

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
  • unbind：只调用一次，指令与元素解绑时调用

所有钩子函数都有以下参数

  • el：指令所绑定的元素，可以用来直接操作 DOM
  • binding：一个对象，包含以下 property：
`name`：指令名，不包括 v- 前缀。

`value`：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

`oldValue`：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

`expression`：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

`arg`：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

`modifiers`：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }

`vnode`：Vue 编译生成的虚拟节点

`oldVnode`：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

防抖案例

// 1.设置v-throttle自定义指令
Vue.directive('throttle', {
  bind: (el, binding) => {
    let setTime = binding.value; // 防抖时间
    if (!setTime) { // 用户若不设置防抖时间，则默认2s
      setTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});
// 2.为button标签设置v-throttle自定义指令
<button @click="sayHello" v-throttle>提交</button>

相关文章