javascript - 如何在 Vue.js 3 中制作自定义指令？

Question

我正在遵循 Custom Directive 的指南在 Vue.js 3 中创建自定义指令。
我做了一个指令来改变一个元素的背景。Home.vue包括使用自定义指令和main.js包括自定义指令定义。
“主页.vue”

<template>
    <p v-highlight="yellow">Home</p>
</template>

“主.js”

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.mount('#app');
app.directive("highlight",{
    beforeMount(el, binding){
        el.style.background = binding.value
    }
});

但是我在控制台中收到以下错误:

"Cannot read property 'created' of undefined"

有人帮助我吗？

Answer 1

只需更改安装/指令的顺序

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.directive("highlight",{
    beforeMount(el, binding){
        el.style.background = binding.value
    }
});
app.mount('#app');

或者你可以做

app.directive("highlight",{
    beforeMount(el, binding){
        el.style.background = binding.value
    }
}).mount('#app');