This is the 14th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

Bs:

In this article, we will also use props and methods to make components communicate with each other. In this article, we will use props and methods to make components communicate with each other.

To:

Components are a very important concept in Vue and the foundation of modular development. During development using VUE, each page is composed of several different components. The diagram below:

Since you have multiple components, you have to make the data dynamic and be able to communicate between multiple components.

Communication between components is undoubtedly one of the following:

  1. Communication between parent and child components
  2. Communication between grandparent and grandchild components (including multiple generations)
  3. Communication between sibling components

This paper Outlines the cases

  1. The props method callback implements component communication
  2. Props for data transfer, and custom events for component communication

This is all I have learned so far. Don’t panic.

Callback to implement component communication

We first initialize a project, subsequent operations are also based on this operation, source code and related project code are in the end of the article warehouse.

Delete the ones that don’t work. Just keep them.

Requirement: We need to add a button in the HelloWorld component that can be clicked to modify the value passed by the parent component and display it.

Let’s get this straight:

  1. First of all, we cannot change the value directly in the child component, which is not allowed by VUE.
  2. Then our actual method of changing the value should be written in the parent component.
  3. Finally, as long as you click the button of the child component, you can call the modification method of the parent component as successful pull.

So the first step is to define a method to modify MSG in the parent component.

methods: {
    updateMsg () {
        this.msg = 'Hello, MY name is Ning Zaichun.'}}Copy the code

Once defined, how do we pass it to the child components? So that a child component can call this method?

Prop can accept function types in subcomponents via Props.

Then we can pass our function to the child component.

<! <HelloWorld: MSG =" MSG ":updateMsg="updateMsg"/> <HelloWorld: MSG =" MSG" :updateMsg "/>Copy the code

After we write here, we also need to go to the child component to receive:

That’s all it takes to complete the reception, and the last thing you need to do is trigger the pull. We can just attach a click event to the button.

<button @click="updateMsg"</button>Copy the code

This is actually possible.

But this limitation is too big, we usually need to pass the value, so as to calculate the communication ya, let’s change it slightly.

In the app component, we’re going to receive a value.

methods: {
    updateMsg (value) {
        this.msg = value
    }
}
Copy the code

Change the following figure in the child component: The same effect can be achieved

The parent component communicates with the parent component, but what about the sibling component? What about posterity components? What to do?

Because the code is so simple, I’m not going to do it all over again, but I made a couple of diagrams to help you understand it.

Props implements component communication with custom events

This article is a simple tie-in, not a detailed description of custom events. There is a need to see 👉 official documents

This props implements component communication with custom events, so it’s pretty small.

1, The first step: the App component binding method name before the quotation mark, change the @ symbol ha.

<HelloWorld :msg="msg" @updateMsg="updateMsg"/>
Copy the code

Step 2: The child component no longer needs to receive in props, and the way the parent component is called is a little different.

This can also achieve the same effect as the first way.

If it is a parent-child component, I think it is very convenient. Instead of using props for receiving, it can be directly bound.

However, communication between grandparent and grandchild components is still cumbersome. It must be passed to the child component before it can be passed to the grandchild component

Child components

Then there’s the grandchild component

Sibling components are also similar to before, this way is more suitable for parent-child component communication, more appropriate.

After the language

Everyone come on!! If there are deficiencies in the article, please point out in time, in this solemn thanks.

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.

Component communication is still being written. There are many ways. These are just the first two.