Ten ways for Vue.js parent-child component communication

[[266702]]

Interviewer: What are the ways for parent-child components to communicate in Vue?

Think about it for a minute.

It is undeniable that now both large and small companies have used the Vue.js framework. Not only is it easy to use, but it also has detailed tutorials, an active community, and many third-party suites.

It is really a must-have skill for front-end developers.

In addition, various questions about Vue are often asked during the interview, and most interviewers will ask questions like the above.

I have been optimizing the Vue project code recently. To be honest, optimizing other people's code is a painful thing. Not to mention the function implementation, I can write another article just talking about the code standards.

It is true that without standards, there is no order. Standards are so important!

Now that I have strayed off topic, let me get back to the topic. Ahem, let me talk about my understanding of the above interview questions. My writing skills are limited, so if there are any inappropriate points, please leave a message at the end of the article to correct me. Correct, ah!

Overview

There are several communication methods:

• Prop(commonly used)
• $emit (mostly used for component encapsulation)
• .sync syntax sugar (less)
• $attrs and $listeners (mostly used for component encapsulation)
• provide and inject (mostly used by high-level components/component libraries)
• Other communication methods

Details

The following is an introduction to each one, please bypass it if you are an expert.

1. Prop

British pronunciation: [prɒp].

This is used a lot in our daily development.

In simple terms, we can pass data to child components through Props.

To use a vivid metaphor, the data transfer between parent and child components is equivalent to a top-down sewer pipe, which can only flow from top to bottom and cannot flow backwards.

This is exactly the one-way data flow of Vue's design concept.

Prop is the connection between pipes, so that water (data) can flow down.

 <div id= "app" > <child :content= "message" ></child></div>
 // Js
 let Child = Vue.extend({
  template: '<h2>{{ content }}</h2>' ,
 props: {
 content: {
 type: String,
 default : () => { return   'from child' }
 }
 }
 }) 
 
 new Vue({
 el: '#app' ,
 data: {
 message: 'from parent'  
 },
 components:
 Child
 }
 })

Browser output:

 from parent

2. $emit

British pronunciation: [iˈmɪt].

The official statement is to trigger an event on the current instance.

Any additional parameters are passed to the listener callback.

According to my understanding, I don't know if I can explain it to you clearly. Let's take a look at the code first:

 <div id= "app" > <my-button @greet= "sayHi" ></my-button></div>
 let MyButton = Vue.extend({
  template: '<button @click="triggerClick">click</button>' ,
 data () {
 return {
 greeting: 'vue.js!'  
 }
 },
 methods: {
 triggerClick () {
      this.$emit( ​​'greet' , this.greeting)
 }
 }
 }) 
 
 new Vue({
 el: '#app' ,
 components:
 MyButton
 },
 methods: {
 sayHi (val) {
      alert( 'Hi, ' + val) // 'Hi, vue.js!'  
 }
 }
 })

The general logic is this: when I click the button on the page, the listener event greet on the component MyButton is triggered, and the parameter is passed to the callback function sayHi.

To put it simply, before we emit an event from a child component, it has already listened to the event and its listener callback in the event queue. In fact, it is equivalent to the following writing:

 vm.$ on ( 'greet' , function sayHi (val) { console.log( 'Hi, ' + val)})vm.$emit( ​​'greet' , 'vue.js' )// => "Hi, vue.js"  

3. .sync modifier

This guy existed as a two-way binding function in [email protected], that is, the child component can modify the value in the parent component.

Because it violates the design concept of one-way data flow, it was removed in [email protected].

However, the .sync modifier was reintroduced in [email protected]+.

But this time it only exists as a compile-time syntactic sugar.

It will be expanded into a v-on listener that automatically updates the parent component's properties.

To put it bluntly, it allows us to manually update the value in the parent component, making the source of the data change more obvious.

The following is a passage from the official:

In some cases, we may need to perform "two-way binding" on a prop.

Unfortunately, true two-way binding can cause maintenance problems because a child component can modify its parent without it being obvious where the changes came from in either the parent or the child.

Since it is a syntax sugar, it must be a shorthand form of some kind of writing method. What kind of writing method is it? Let's look at the code:

 <text-document v-bind:title= "doc.title" v- on : update :title= "doc.title = $event" ></text-document>

So we can use .sync syntax sugar to shorten it to the following form:

 <text-document v-bind:title.sync= "doc.title" ></text-document>

So much nonsense, how to achieve "two-way binding"?

Let's go to the commercial, it will be more exciting after the commercial!

... Okay, welcome back.

Suppose we want to achieve such an effect: changing the value in the text box of the child component will change the value in the parent component at the same time.

How to do it? Let's think about it first. Let's look at the code first:

 <div id= "app" > <login : name .sync= "userName" ></login> {{ userName }}</div>
 let Login = Vue.extend({
 template: `
    <div class= "input-group" >
 <label>Name:</label>
      <input v-model= "text" >
 </div>
 `,
 props: [ 'name' ],
 data () {
 return {
 text: ''  
 }
 },
 watch:
 text(newVal) {
      this.$emit( ​​'update:name' , newVal)
 }
 }
 }) 
 
 new Vue({
 el: '#app' ,
 data: {
 userName: ''  
 },
 components:
 Login
 }
 })

Here is the key point. There is this sentence in the code:

 this.$emit( ​​'update:name' , newVal)

The official syntax is: update:myPropName where myPropName represents the prop value to be updated.

Of course, if you don't use the .sync syntax sugar, you can also use .$emit above to achieve the same effect. That's all!

4. $attrs and $listeners

• The official website explains $attrs as follows:

Contains feature bindings (except class and style) that are not recognized (and obtained) as props in the parent scope.

When a component does not declare any props, this contains all parent scope bindings (except class and style) and can be passed into inner components via v-bind="$attrs" - very useful when creating high-level components.

• The official website explains $listeners as follows:

Includes v-on event listeners from the parent scope (without the .native modifier).

It can be passed into inner components via v-on="$listeners" - very useful when creating higher level components.

I think the $attrs and $listeners attributes are like two storage boxes, one for storing attributes and the other for storing events, both of which store data in the form of objects.

See the following code explanation:

 <div id= "app" > <child :foo= "foo" :bar= "bar" @one.native= "triggerOne" @two= "triggerTwo" > </child></div>

As you can see from the Html, there are two attributes and two methods. The difference is that the attribute one is a prop declaration, and the event one is a .native modifier.

 let Child = Vue.extend({
  template: '<h2>{{ foo }}</h2>' ,
 props: [ 'foo' ],
 created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar" }
 // -> {two: fn} 
 
 
 // Here we access the `triggerTwo` method in the parent component
 this.$listeners.two()
 // -> 'two'  
 }
 }) 
 
 new Vue({
 el: '#app' ,
 data: {
 foo: 'parent foo' ,
 bar: 'parent bar'  
 },
 components:
 Child
 },
 methods: {
 triggerOne () {
 alert( 'one' )
 },
 triggerTwo() {
 alert( 'two' )
 }
 }
 })

As you can see, we can pass data through $attrs and $listeners, and call and process it where needed, which is very convenient.

Of course, we can also pass it down level by level through v-on="$listeners", and there will be no end to the descendants!

An interlude!

When we assign a non-Prop declaration to a component, the compiled code will treat these properties as raw properties and add them to the HTML native tag. See what the above code looks like after compilation:

 <h2 bar= "parent bar" >parent foo</h2>

This would be ugly and would also expose something.

How to remove?

This is where the inheritAttrs attribute comes in handy!

Just add this attribute to the component, usually used in conjunction with $attrs.

Look at the code:

 // Source code let Child = Vue.extend({ ... inheritAttrs: false , // default is true ...})

Compile again:

 <h2>parent foo</h2>

5. provide / inject

They are a perfect couple, it feels quite mysterious.

Let's take a look at the official description of provide / inject:

provide and inject are mainly used for high-level plugin/component libraries.

It is not recommended to use it directly in application code.

And this pair of options needs to be used together to allow an ancestor component to inject a dependency into all its descendants, no matter how deep the component hierarchy is, and always take effect as long as the upstream and downstream relationships are established.

I'm a bit confused after reading the description!

To sum it up in one sentence: when you were a child, your father saved everything for you, and when you grew up and were ready to get married, he would buy you a house or a car if you wanted one, and he would try his best to satisfy you as long as he had it.

Here is the code explanation of this sentence:

 <div id= "app" > <son></son></div>
 let Son = Vue.extend({
 template: '<h2>son</h2>' ,
 inject:
 house:
 default : 'No room'  
 },
 car:
 default : 'No car'  
 },
 money:
 // I grew up and started working, although I had some money
 // Only for living expenses, need to ask parents for
 default : '￥4500'  
 }
 },
 created () {
    console.log(this.house, this.car, this.money)
 // -> 'house' , 'car' , '￥10000'  
 }
 }) 
 
 new Vue({
 el: '#app' ,
 provide:
 house: 'house' ,
 car: 'car' ,
 money: '￥10000'  
 }, 
 
 components:
 Son
 }
 })

6. Other communication methods

In addition to the above five methods, there are also:

• EventBus

The idea is to declare a global Vue instance variable EventBus and store all communication data and event monitoring in this variable.

This achieves data sharing between components, which is somewhat similar to Vuex.

However, this method is only suitable for very small projects, and Vuex is recommended for complex projects.

Below is a simple code to implement EventBus:

 <div id= "app" > <child></child></div>
 // Global variables
 let EventBus = new Vue() 
 
 // Subcomponent
 let Child = Vue.extend({
  template: '<h2>child</h2>' ,
 created () {
    console.log(EventBus.message)
 // -> 'hello'  
    EventBus.$emit( ​​'received' , 'from child' )
 }
 }) 
 
 new Vue({
 el: '#app' ,
 components:
 Child
 },
 created () {
 // Save variables
    EventBus.message = 'hello'  
 // Event monitoring
    EventBus.$ on ( 'received' , function (val) {
      console.log( 'received: ' + val)
      // -> 'received: from child'  
 })
 }
 })

• Vuex

Officially recommended, Vuex is a state management pattern developed specifically for Vue.js applications.

• $parent

The parent instance, if the current instance has one.

Data can also be interacted with by accessing the parent instance, but in very rare cases the data in the parent component will be directly modified.

• $root

The root Vue instance of the current component tree.

If the current instance has no parent, this instance will be itself.

Data can also be interacted with by accessing the root component, but in very rare cases the data in the parent component will be directly modified.

• broadcast / dispatch

They are methods in [email protected], namely event broadcasting and event dispatching.

Although they are deleted in [email protected], these two methods can be simulated.

You can refer to Element for implementation.

Sometimes it is very useful, such as when we are developing tree components.

Summarize

After saying so much, I hope that the students who read this will gain something from it.

If there are any mistakes, please leave a message to correct me. I would be very grateful.

There are actually many ways to communicate between parent and child components, depending on the circumstances in which you use them.

Treat different scenarios differently.

The premise is that you have to know what's going on!

There is still a long way to go to become a great person. As long as you check the community, documents, write demos, and make a little progress every day, you will always gain something.