Vue 3 我可以获得应用于组件的自定义指令列表吗？答案

【问题标题】：Vue 3 Can I get a list of custom directives applied to the component?Vue 3 我可以获得应用于组件的自定义指令列表吗？
【发布时间】：2021-09-08 02:41:15
【问题描述】：

我能否获得应用于组件的自定义指令列表？在 getCurrentInstance 调用返回的实例中，当前组件的指令为空。预期的“亮点” 如何获取应用于当前组件的指令列表？ (Vue v3.1.2)

在 Vue 2.x 中它位于 this.$vnode.data.directives

https://jsfiddle.net/6e08styL/27/

html

<script src="https://unpkg.com/vue@3"></script>

<div id="app"></div>

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 log

【问题讨论】：

标签： typescript vue.js vuejs3 vue-composition-api

【解决方案1】：

可通过以下方式获得：

getCurrentInstance().vnode.dirs

demo

【讨论】：