如何在 Vue.js 3 中制作自定義指令？

Question

我按照自定義指令的指南在 Vue.js 中創建自定義指令 3. 我制定了一個指令來更改元素的背景。

Home.vue包含自定義指令的使用，而main.js包含自定義指令定義。

“首頁.vue”

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

“main.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');