Vue.js "emit event" 不要冒泡到父元素和祖父元素

Question

我想 emit 自定义事件从孙元素通过子元素冒泡到父元素。但它不起作用。即使直接在父元素或子元素上触发事件也不起作用。

<div id="example-app" >
   <parent>
      <child>
         <grandchild></grandchild>
      </child>
   </parent>
</div>

这里是组件代码：

Vue.component('parent', {
    template: ` <div @testevent="test" style="padding: 10px; background-color: red; border: 1px solid black;">
                    <button @click="$emit('testevent')">Parent Button</button>
                    <button @click="test">Triggger Test Manueally</button>

                    <slot ></slot>
                </div>`,
    methods: {
        test () {
            alert('Test ok')
        }
    }
})

Vue.component('child', {
    template: ` <div style="padding: 10px; margin: 5px; background-color: green; border: 1px solid black;">
                    <button @click="$emit('testevent')">Child Button</button><br>
                    <slot></slot>
                </div>`
})

Vue.component('grandchild', {
    template: `<div style="padding:10px; margin: 5px; background-color: white; border: 1px solid black;">
                <button @click="$emit('testevent')">Grandchild Button</button>
                </div>`
})

new Vue({
    el: '#example-app',
})

Answer 1

您可以尝试这样的操作：

Vue.component('parent', {
    template: ` <div style="padding: 10px; background-color: red; border: 1px solid black;">
                    <button @click="$emit('testevent')">Parent Button</button>
                    <button @click="test">Triggger Test Manueally</button>

                    <slot ></slot>
                </div>`,
    methods: {
        test () {
            alert('Test ok')
        }
    },
    mounted: function() {
      this.$on('testevent', () => {
        this.test()
      })
    }
})

Vue.component('child', {
    template: ` <div style="padding: 10px; margin: 5px; background-color: green; border: 1px solid black;">
                    <button @click="$emit('testevent')">Child Button</button><br>
                    <slot></slot>
                </div>`,
    mounted: function() {
      this.$on('testevent', () => {
        this.$parent.$emit('testevent')
      })
    }
})

Vue.component('grandchild', {
    template: `<div style="padding:10px; margin: 5px; background-color: white; border: 1px solid black;">
                <button @click="$parent.$emit('testevent')">Grandchild Button</button>
                </div>`
})

new Vue({
    el: '#example-app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example-app" >
   <parent>
      <child>
         <grandchild></grandchild>
      </child>
   </parent>
</div>

Vue.js "emit event" 不要冒泡到父元素和祖父元素

Vue.js "emit event" don't bubble up to parent and grandparent element

javascript

events

event-handling

event-bubbling

vue.js