自定义指令钩子函数参数

指令的钩子会传递以下几种参数

• el：指令绑定到的元素。这可以用于直接操作 DOM。

• binding：一个对象，包含以下属性。

  • value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
  • oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
  • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
  • modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
  • instance：使用该指令的组件实例。
  • dir：指令的定义对象。

• vnode：代表绑定元素的底层 VNode。

• prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

模拟v-show指令

xxxxxxxxxx
<template>
    <h3>自定义指令</h3>
    <p v-myShow="flag">{{ message }}</p>
    <button @click="updateHandler">显隐Toggle</button>
</template>
<script setup>
import { ref } from "vue"
const message = ref("模拟v-show指令")
const flag = ref(true)
function updateHandler(){
    flag.value = flag.value === true ? flag.value=false : flag.value = true
}
const vMyShow = {
    updated(el, binding) {
        binding.value === true ? el.style.display='block' : el.style.display='none'
    }
}
</script>

实时效果反馈

1. 下列代码中，画横线的地方应该填写的是：

xxxxxxxxxx
<template>
    <h3>自定义指令</h3>
    <p v-myShow="flag">{{ message }}</p>
    <button @click="updateHandler">显隐Toggle</button>
</template>
<script setup>
import { ref } from "vue"
const message = ref("模拟v-show指令")
const flag = ref(true)
function updateHandler(){
    flag.value = flag.value === true ? flag.value=false : flag.value = true
}
const vMyShow = {
    ___(el, binding) {
        binding.value === true ? el.style.display='block' : el.style.display='none'
    }
}
</script>

A created

B mounted

C updated

D unmounted

答案

1=>C