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()
  }
 })

同时官方还给出一个注意点：当被应用在一个多根节点的组件上时，指令会被忽略，并且会抛出一个警告。