I'm trying to dispatch a custom event that will bubble up from the grandchild element through the child element to the parent element, but for some reason it's not working. Even manually triggering the event on either the parent or child element doesn't seem to have any effect.
<div id="example-app" >
<parent>
<child>
<grandchild></grandchild>
</child>
</parent>
</div>
Check out the Component Code below:
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">Trigger Test Manually</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',
})