vue3中自定义指令的简单案例
官方文档中给了一个很简单的示例，官方文档地址：自定义指令
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()
}
})
同时官方还给出一个注意点：当被应用在一个多根节点的组件上时，指令会被忽略，并且会抛出一个警告。
网友评论