Parent-child communication in VueJS

Question

I have two Vue components. The parent-component:

Vue.component('parent-component',{
 methods: {
 test: function(){
 alert('Option Selected');
 }
 },
 template: `
 <div><slot></slot></div>
 `
});

And the animals component:

Vue.component('animals',{
 data: function(){
 return {
 selected: ''
 }
 },
 template: `
 <select @change="selectionChanged" v-model="selected">
 <slot></slot>
 </select>
 `,
 methods: {
 selectionChanged: function(){
 this.$emit('optionselected', this.selected);
 }
 }
 });

And here is my HTML:

<div id="app">
 <parent-component @optionselected="test()">
 <animals>
 <option>Aardvark</option>
 <option>Bear</option>
 <option>Cat</option>
 </animals>
 </parent-component>
 </div>

I am trying to get the selected option from child component (animals) to the parent component (parent-component). I am emitting the optionselected event from the child, but it looks like the parent component is not responding to that event, I mean the method test() is not being called at all. What am I doing wrong here?

Here is the JSFiddle Demo

Answer 1

First, you need to add the listener to the animals component in your template.

<animals @optionselected="test">

Second, it's important to remember that because you are using slots, the elements inside the slots are going to be evaluated in the scope of the component in which they are defined. In this case, that scope is the Vue's scope, not the parent-component scope. In order to allow the elements defined inside a slot to use the containing components data, methods, etc, you need to define a scoped slot. That being the case, your parent component would end up looking like this:

<div><slot :test="test"></slot></div>

And your Vue template becomes

<parent-component>
 <template scope="{test}">
 <animals @optionselected="test">
 <option>Aardvark</option>
 <option>Bear</option>
 <option>Cat</option>
 </animals>
 </template>
</parent-component>

Here is the updated code.

console.clear()
Vue.component('parent-component', {
 methods: {
 test: function(option) {
 alert('Option Selected ' + option);
 }
 },
 template: `
 <div><slot :test="test"></slot></div>
 `
});
Vue.component('animals', {
 data: function() {
 return {
 selected: ''
 }
 },
 template: `
 <select @change="selectionChanged" v-model="selected">
 <slot></slot>
 </select>
 `,
 methods: {
 selectionChanged: function() {
 this.$emit('optionselected', this.selected);
 }
 }
});
new Vue({
 el: "#app",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
 <parent-component>
 <template scope="{test}">
 <animals @optionselected="test">
 <option>Aardvark</option>
 <option>Bear</option>
 <option>Cat</option>
 </animals>
 </template>
 </parent-component>
</div>

• Tanmay: Thanks. But how do I receive the this.selected property that was passed from animals to parent-component during the event emission: this.$emit('optionselected', this.selected);
• Bert: @Eisenheim You are passing it. You just weren't doing anything with it. I updated the alert to show the selected value.