vue3自定义指令详解

vue3中自定义指令的简单案例

官方文档中给了一个很简单的示例，官方文档地址：

https://v3.cn.vuejs.org/guide/custom-directive.html

const APP = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`app.directive(‘focus’, {  // 当被绑定的元素挂载到 DOM 中时……  mounted(el) {    // 聚焦元素    el.focus()  }})然后给了一个使用示例：

<input v-focus />示例非常简单，按照官方的说明写下这个案例后也能够正常运行。但实际使用肯定不止于此，我们必然会遇到需要传递参数的需求，而且官方文档后面又提到可以给自定义指令传递值和参数，并且给出了一个公式说明：

v-mydirective:[argument]=”value”这里面的argument和value可以通过钩子函数中的binding参数获取到具体就是

binding.value可以获取到自定义指令中的value，binding.arg可以获取到指令的动态参数argument。在这个地方，我犯了一个想当然的错误，举例来说：

<input v-focus[direction]=”demo” />我觉得按照官方文档上的介绍那我应该能得到binding.value是demo，binding.arg是direction，但实际我得到了两个undefined。我以为我应该是传递了两个字符串，这里其实没注意到vue的指令中我这样写实际是传递了一个需要在组件的data中定义的变量。也就是我必须在setup中定义出来这两个变量：

<script setup>    let direction = ‘right’    let demo = ‘demoStr'</script>这样我在自定义指令的钩子函数中就可以得到正确的结果：

app.directive(‘focus’, {  mounted(el, binding){    console.log(binding.value) //这里打印出demoStr    console.log(binding.arg)   //这里打印出right    el.focus()  } })这里再看上面官方给的公式

v-mydirective:[argument]=”value”这里面的argument和value实际是需要你定义的两个变量，可以接受的值也是可以多种类型的，基本类型或者对象字面量都可以。

<input v-focus[12]=”23″ />  // binding.value是23，binding.arg是12，数字类型<input v-focus[true]=”false” /> // binding.value是false，binding.arg是true，布尔类型<input v-focus[direction]=”demo” /> //这里binding.value是{valueStr: ‘demoStr’}, binding.arg是{direction：’right’}//setup中定义对象<script setup>    let direction = {        direction：’right’    }    let demo = {        valueStr: ‘demoStr’    }</script>//这里也可以使用对象字面量，而不是setup中定义变量<input v-focus[{direction: ‘right’}]=”{valueStr: ‘demoStr’}” />
自定义指令在组件中使用

比如我们想在elment-plus的组件上使用自定义指令，类似下面这样：

<el-input v-focus:[direction]=”pinPadding” ></el-input>这里的el-input是element-plus提供的组件，它会被渲染成<div>包裹<input>的结构。

这个时候，自定义指令总是会被应用在组件的根节点上，这个时候我们获取input这个节点的方式就会有变化：

app.directive(‘focus’, {  mounted(el, binding){    let subNode = el.getElementsByTagName(‘input’)[0]    subNode.focus()  } })同时官方还给出一个注意点：当被应用在一个多根节点的组件上时，指令会被忽略，并且会抛出一个警告。