Mi objetivo es crear una directiva que, al hacer clic, busque recursivamente a través de los padres hasta que encuentre el primer componente (vnode) con la etiqueta role="blinkable" y active la función 'blink()'.

No sé cómo encontrar el primer padre del elemento con la directiva 'v-blink-popup'. He agregado una etiqueta de rol al componente en caso de que eso ayude. Pero al mirar el nodo el o de la directiva, ¿la propiedad principal es nula? Tiene que haber una manera de hacer esto.

Creé una directiva llamada v-blink-popup...

BlinkPopup.js (directiva global)

 const blinkPopup = { bind: (el, binding, vnode) => { el.style.fontSize = 24 + 'px' el.style.backgroundColor = 'red' // find parent vnode console.log('el', el) } } export default blinkPopup ... Vue.directive('blink-popup', blinkPopup)

BlinkDialog.vue (componente)

 <template> <div role='blinkable'> <div class="bg-white rounded"> <slot /> </div> </div> </template> <script> export default { props: { value: { type: Boolean, default: false, }, }, methods: { blink() { console.log('blink me') }, }, } </script>

Page.vue (archivo de página)

 <template> <div> <BlinkDialog> Here is my component <button v-blink-popup> close </button> </BlinkDialog> </div> </template>