How to implement parent-child component communication with Vue

1. Relationship between parent and child components

This article will summarize the communication method between parent and child components in Vue.

So how is the relationship between parent and child components constructed in Vue, or which component can be called a parent component and which component can be called a child component?

In my understanding, the relationship between parent and child components is also relatively simple.

In projects built with the vue-cli tool, we often register a reference to another component in one component.

Home.vue

<template>
  <div class="home">
    <p>This is the Home component</p>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>
<style scoped>
    .home{
        border:1px solid #4488ff;
        display: inline-block;
        padding: 10px;
    }
</style>

App.vue

<template>
  <div id="app">
    <p>Here is the app component</p>
    <!-- stpe3: Use -->
    <home></home>
  </div>
</template>

<script>
// step1: import Home from './components/Home'
export default {
  name: 'App',
  // step2: register components: { Home }   
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: inline-block;
  border:1px solid orange;
  padding: 10px;
}
</style>

In the above two components, we introduced, registered and used the Home component in the App component.

In Vue, we can call the App component the parent component and the Home component the child component. These two components form a parent-child relationship.

It is important to note here that the three steps of introduction, registration and use are indispensable.

Otherwise, the two components cannot form a parent-child relationship, nor can they communicate using the several communication methods summarized later.

After understanding the composition relationship of parent-child components in Vue, I will now introduce how parent-child components communicate with each other.

2. Props

The first way for parent-child components to communicate in Vue is through the props attribute, and the parent component communicates to the child component.

Let’s put it into practice.

First, find the place where the child component is used in the parent component, and add the data that the parent component needs to pass to the child component.

App.vue (some unmodified code omitted)

<template>
  <div id="app">
    <p>Here is the app component</p>
    <home
        Title="Communication method between parent and child components in Vue"
        date="2020/03/05 14:25">
    </home>
  </div>
</template>

As you can see, in this step we added two data that need to be passed to the subcomponent where the subcomponent is used: title and date.

<home
     Title="Communication method between parent and child components in Vue"
     date="2020/03/05 14:25">
</home>

The next step is to use props in the child component to receive these two parameters.

Home.vue (some unmodified code omitted)

<script>
export default {
  name: 'Home',
  props: ['title', 'date']
}
</script>

In the last step, we can use title and date in the child component just like using vue data.

Home.vue (some unmodified code omitted)

<template>
  <div class="home">
    <p>This is the Home component</p>
    <p>title:{{title}}</p>
    <p>date:{{date}}</p>
  </div>
</template>

After starting the project, check the effect in the browser.

3. $emit

The second way of parent-child component communication in Vue is through the $emit method, which is the communication between the child component and the parent component.

The $emit method is an instance method of Vue, and its usage is as follows:

The first parameter eventName is called the event name.

The event corresponding to the event name is a native DOM event listened to by v-on in the parent component (it can be understood as a custom event like click).

When we execute $emit(eventName) in the child component, the corresponding event in the parent component will be triggered.

So first we use the $emit method in the child component to write code (without passing the second parameter) to trigger the event in the parent component.

Home.vue

<template>
  <div class="home">
    <p>This is the Home component</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
  </div>
</template>
<script>
export default {
  name: 'Home',
  methods: {
    btnClickHandler: function(param){
        if(param == "Yes"){
            this.$emit('sayYes');
        }else if(param == "No"){
            this.$emit('sayNo');
        }
    }
  }
}
</script>

As you can see, there are two buttons in the Home subcomponent.

When the [Yes] button is clicked, this.$emit('sayYes') is executed, triggering the sayYes event in the parent component.

When the [No] button is clicked, this.$emit('sayNo') is executed, triggering the sayNo event in the parent component.

Then we implement the corresponding native DOM events in the parent component.

App.vue

<template>
  <div id="app">
    <p>Here is the app component</p>
    <home
        v-on:sayYes='val="yes"'
        v-on:sayNo='val="no"'>
    </home>
    <p>val: {{val}}</p>
  </div>
</template>

<script>
import Home from './components/Home'
export default {
  name: 'App',
  data() {
    return {
      val: "default",
    }
  },
  components: { Home },
}
</script>

Among them, sayYes and sayNo are native DOM events defined in the parent component.

<home
        v-on:sayYes='val="yes"'
        v-on:sayNo='val="no"'>
</home>

val is a data defined in the parent component, and its default value is 'default'.

Then, combined with the code logic of the subcomponent, we know that there will be the following results:

When the [Yes] button is clicked, this.$emit('sayYes') will be executed, triggering the sayYes event in the parent component. In the sayYes event, the val value in the vue data will be changed to yes.

When the [No] button is clicked, this.$emit('sayNo') will be executed, triggering the sayNo event in the parent component. In the sayNo event, the val value in the vue data will be changed to no.

Verify our statement in your browser.

IV. $parent

$parent is an instance property of Vue, which represents the parent instance of the current component.

If there is a method called sayYes in the parent component, then you can directly use this.$parent.sayYes in the child component to call the parent component method.

App.vue

<template>
  <div id="app">
    <p>Here is the app component</p>
    <home></home>
    <p>val: {{val}}</p>
  </div>
</template>

<script>
import Home from './components/Home'
export default {
  name: 'App',
  data() {
    return {
      val: "default",
    }
  },
  components: { Home },
  methods: {
    sayYes: function() {
      this.val = "yes";
    },
    sayNo: function() {
      this.val = "no";
    }
  }
}
</script>

We defined two methods in the parent component: sayYes and sayNo, and their logics are: change the value of val to yes; change the value of val to no.

Then you can use this.$parent.sayYes and this.$parent.sayNo in the child component to call the corresponding sayYes and sayNo methods in the parent component.

Home.vue

<template>
  <div class="home">
    <p>This is the Home component</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
  </div>
</template>
<script>
export default {
  name: 'Home',
  methods: {
    btnClickHandler: function(param){
        if(param == "Yes"){
            this.$parent.sayYes();
        }else if(param == "No"){
            this.$parent.sayNo();
        }
    }
  }
}
</script>

The code of the btnClickHandler method in the child component has been changed to this.$parent.

Then let’s look at the results.

V. Conclusion

At this point, the communication methods of parent-child components in Vue have been summarized, and the following methods are summarized respectively:

The first one: parent component communicates to child component - props attribute

The second method: Child component communicates with parent component - $emit method

The third type: child components communicate with parent components-$parent attribute

The above is the details of how to use Vue to realize parent-child component communication. For more information about Vue parent-child component communication, please pay attention to other related articles on 123WORDPRESS.COM!