Active events in vue instance encapsulate inside shadowDOM-CodePudding

I'm searching to trigger event from a vue instance which is encapsulate inside a shadowDOM.

For the moment, my code create a new Vue instance inside a shadowDOM and print the template without the style (because nuxt load the style inside the base vue instance).

I can call method of each instance

But, when i'm trying to add an event / listener on my component, it doesn't work.

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>

bloc.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>

Any idea ?

Thank you

CodePudding user response：

bloc @click.native='listenClick'/>

CodePudding user response：

Hi so after i watched at your code i think it's better to use the $emit to pass event from the child to the parent and i think it's more optimized then a @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>