vue3 自定义指令 接收动态参数
时间: 2023-10-24 20:24:37 浏览: 181
vue项目中常用的自定义指令
在 Vue3 中,我们可以使用 `directive` 函数来定义自定义指令,该函数接收两个参数:指令名称和一个对象,该对象包含指令的生命周期函数。
在对象中,我们可以使用 `beforeMount` 和 `updated` 生命周期函数来接收动态参数,例如:
```javascript
const app = Vue.createApp({});
app.directive("my-directive", {
beforeMount(el, binding) {
console.log("beforeMount", binding.value);
},
updated(el, binding) {
console.log("updated", binding.value);
},
});
app.mount("#app");
```
在上面的例子中,我们定义了一个名为 `my-directive` 的自定义指令,并在该指令的 `beforeMount` 和 `updated` 生命周期函数中接收了动态参数 `binding.value`。这个参数可以是任何类型的值,例如字符串、数字、对象等。
我们可以在模板中使用该自定义指令,并传递动态参数,例如:
```html
<div v-my-directive="myValue"></div>
```
在上面的例子中,`myValue` 是一个动态参数,它可以是任何类型的值。当该指令被绑定到元素上时,`beforeMount` 生命周期函数将会被调用,并将 `myValue` 作为参数传递进去。当 `myValue` 发生变化时,`updated` 生命周期函数将会被调用,并将新的值作为参数传递进去。
总之,在 Vue3 中,我们可以很容易地定义自定义指令,并在指令的生命周期函数中接收动态参数,这使得我们可以根据需要动态地修改指令的行为。
阅读全文