Vue3实战笔记（62）—Vue3自定义指令入门：10分钟学会基础用法

前言

Vue 3 中自定义指令（Custom Directives）的功能依然强大，但API相较于Vue 2有所改变，更加强调Composition API的使用方式。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

下面是如何在Vue 3中创建和使用自定义指令的简要指南，官方的小例子：


<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

很简单一句话就能用了，我刚开始是没看懂的，这定义了一个函数怎么就能当指令用？测试一下，居然可行。

在

学过vue2的都知道指令是需要注册的，在没有使用

//局部注册
export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      /* ... */
    }
  }
}


// 注册一个全局自定义指令 `v-focus`，该指令用于输入框自动获取焦点
Vue.directive('focus', {
  // 当绑定元素插入到DOM中时
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
})

简化：

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：


<div v-color="color"></div>


app.directive('color', (el, binding) => {
  // 这会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

这样，简单的自定义指令就已经学会了。

昨日种种，皆成今我，切莫思量，更莫哀。从今往后，怎么收获，怎么栽。