如何在 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
    }
});

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

“无法读取未定义的‘创建’属性”

有人帮助我吗？

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');