Detailed explanation of vue data binding method

As we all know, vue is a one-way data flow, and child components cannot directly change variables in the parent component, as follows:

parent.vue

children.vue

The page is as follows:

Click After:

The above is the most basic parent to pass data to the child component. Modifying variables of the child component does not affect the parent component. So what if the parent and child components want to be synchronized? At this time, you should use thethis.$emit()function.

First type: v-model transfer

Parent component modification:

Subcomponent modification:

Note: The model part cannot be omitted, the event triggered by this.$emit() is input (when the return event is not explicitly bound on the parent component, input is the default ), the value passed is child

page as follows:

After clicking:

It can be seen that the values of the parent and child components are synchronized

Second type: Explicitly specify the response event (@)

Parent component modification:

Child component modification:

Here I deliberately modified the value of msg after emit. It turns out that this is not possible, so I guess that emit is an asynchronous function that will be executed at the end of the queue, which means that the value is assigned here' from children' was eventually overwritten.

It is worth mentioning that the second parameter of this.$emit() can pass the value to the parent component. It is very useful here. You can experience it by yourself

The page is as follows:

##After clicking:

Both methods can basically achieve the expected results. You can use them according to the specific situation.

After talking about the communication between father and son, it is natural to communicate between the child and child components. Yes, in fact, you are smart and should have figured out how to do it. That's right, it uses the parent component as a springboard to allow child components to achieve communication effects.

Here is a small example:

Parent component:

Sub-component one:

Sub-component two:

The page is as follows: After clicking:

This article introduces the detailed explanation of vue data binding method. For more related content, please pay attention to the PHP Chinese website.

Related recommendations:

Simple PHP MySQL paging class

Two tree array constructors without recursion

Convert HTML to Excel, and realize printing and downloading functions

The above is the detailed content of Detailed explanation of vue data binding method. For more information, please follow other related articles on the PHP Chinese website!