Is there a way to retrieve the list of custom directives applied to a component? When using the getCurrentInstance method, the directives property is null for the current component. I was expecting to see 'highlight' listed. How can I access the list of directives applied to the current component in Vue version 3.1.2?
In Vue 2.x, this information could be found in this.$vnode.data.directives
HTML:
<script src="https://unpkg.com/vue@3"></script>
<div id="app"></div>
JavaScript:
const {
createApp,
getCurrentInstance
} = Vue
const app = createApp({
template: `<test v-highlight="'red'"></test>`,
})
app.component('test', {
name: 'test',
template: `<div>{{msg}}</div>`,
data: () => ({
msg: 'Hello Vue.js'
}),
setup() {
const instance = getCurrentInstance()
console.log(instance)
}
})
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})
app.mount('#app')
Console Output: View console log