Estoy buscando desencadenar un evento desde una instancia de vue que está encapsulada dentro de un shadowDOM.
Por el momento, mi código crea una nueva instancia de Vue dentro de un shadowDOM e imprime la plantilla sin el estilo (porque no carga el estilo dentro de la instancia base de Vue).
Puedo llamar a los métodos de cada instancia.
Pero, cuando intento agregar un evento/escucha en mi componente, no funciona.
DOM.vue
<template> <section ref='shadow'></section> </template> <script> import bloc from '@/components/bloc.vue' import Vue from 'vue' export default { data() { return { vm: {}, shadowRoot: {}, isShadowReady: false } }, watch: { isShadowReady: function() { let self = this this.vm = new Vue({ el: self.shadowRoot, components: { bloc }, template: "<bloc @click='listenClick'/>", methods: { listenClick() { console.log("I clicked !") }, callChild() { console.log("I'm the child !") } }, created() { this.callChild() self.callParent() } }) } }, mounted() { const shadowDOM = this.$refs.shadow.attachShadow({ mode: 'open' }) this.shadowRoot = document.createElement('main') shadowDOM.appendChild(this.shadowRoot) this.isShadowReady = true }, methods: { callParent() { console.log("I'am the parent") }, } } </script>bloque.vue
<template> <div> <p v-for='word in words' style='text-align: center; background: green;'> {{ word }} </p> </div> </template> <script> export default { data() { return { words: [1,2,3,4,5,6] } } } </script>Alguna idea ?
Gracias
Hola, después de ver tu código, creo que es mejor usar $emit para pasar el evento del niño al padre y creo que está más optimizado que un @click.native
template: "<bloc @someevent='listenClick'/>", <template> <div @click="listenClickChild"> <p v-for='(word, idx) in words' :key="idx" style='text-align: center; background: green;'> {{ word }} </p> </div> </template> <script> export default { data() { return { words: [1,2,3,4,5,6] } }, methods: { listenClickChild() { this.$emit('someevent', 'someValue') } } } </script>bloque @click. nativo ='escucharClick'/>