封装在 shadowDOM 中的 vue 实例中的活动事件

Question

我正在搜索从封装在 shadowDOM 中的 vue 实例触发事件。

目前，我的代码在 shadowDOM 中创建一个新的 Vue 实例并打印没有样式的模板（因为 nuxt 在基本 vue 实例中加载样式）。

我可以调用每个实例的方法

但是，当我尝试在我的组件上添加事件/侦听器时，它不起作用。

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>

有什么想法吗？

谢谢

Answer 1

bloc @click.native='listenClick'/>

Answer 2

您好，在看了您的代码后，我认为最好使用 $emit 将事件从子级传递给父级，我认为它比 @click.native[=14 更优化=]

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>

封装在 shadowDOM 中的 vue 实例中的活动事件

Active events in vue instance encapsulated inside shadowDOM

javascript

frameworks

vue.js

nuxt.js