Communication mode between Vue components

Time:2019-11-22

The example is written on jsrun.net platform, which does not support mobile platform, so this article suggests reading it on PC.

Vue is a data-driven view framework, so the data communication between components is inevitable, so how to transfer data between components?

First of all, there are parent-child components, brother components, cousin components and uncle nephew components in the communication between components. It may not be easy to understand if there are too many classifications. We can divide them into:

  • Parent child component communication
  • Child parent component communication
  • Non parent child component communication

    • Brother component communication
    • Non sibling component communication (not direct relationship, such as cousin component, nephew component, etc.)

Subsequent examples of how components communicate with each other are illustrated by these classifications.

What types of communication are provided by Vue itself?

First of all, Vue is inspired by angular and supports two-way binding. The essence of Vue is stillOne way data flow。 As with react, the most basic data flow between components is to pass data to subcomponents through prop.

Communication mode between Vue components

Here is a list of the communication modes supported by Vue itself:

  • prop
  • $emit

    This is actually similar to react’s props callback.

  • provide / inject

    If you are familiar with react, this is very similar to the context feature of react.

Then someone said$attrs$listenerWhat about it? These strictly cannot be summed up as the communication mode of data flow, these are only auxiliary properties, and I do not recommend excessive use of these$Attribute, except for some necessary scenarios.

prop

Prop is one of the three core concepts of Vue, and it is ubiquitous in components. Prop can only be passed from the upper level component to the next level component (parent-child component), that is, the so-calledOne way data flow。 Moreover, prop is read-only and cannot be modified. All modifications will be invalidated and a warning will be given.

You can first read the official website’s tutorial of passing data to subcomponents through prop.

Parent child component communication

A simple example is also written here, http://jsrun.net/wxykp/edit.

Child parent component communication

Isn’t it one-way data flow? How can we use prop to do thisChild parent component communication? That’s right. Prop can’t pass data up, but we can use callback. The data flow does go up, but this does not violate the idea of one-way data flow, which will not make the data flow chaotic, or relatively clear.

This prop callback method is often used in react. However, it is rarely used in Vue, because components can customize events, that is, the following$emitCommunication between components (in fact, subscription and publishing mode).

For an example, see this http://jsrun.net/axykp/edit.

Communication of brother components

If you understand the aboveParent child component communicationandChild parent component communication, then it’s easy for you to understandBrother component communicationThe way.

See the following example http://jsrun.net/qyykp/edit.

The communication of brother components isParent child component communicationandChild parent component communicationThe parent component is required to be the intermediate component for data transmission.

Isn’t that too much trouble? It’s a step more, so we won’t use this method for data transmission.

But the idea of one-way data flow is that there is no cross data flow. Even vuex can’t avoid this step, but you can’t feel this step in the use of vuex.So please don’t introduce the third-party subscription and publication class library to solve this problem. Brother components can’t communicate directly, which will cause data flow confusion, which completely violates the idea of one-way data flow.

You can see this strongly deprecated example http://jsrun.net/pyykp/edit, which completely violates the idea of one-way data flow. When the program is complex, the data flow will be particularly chaotic and the project is not easy to maintain.

$emit

For the official website tutorial, you can see listening to sub component events.

$onand$emitIt is the subscription publishing mode of Vue, and you can customize events. stayChild parent component communicationThis mode can be used instead of prop callback mode, which is relatively convenient.

For each component$onand$emitThey are all independent,$emitOnly the current component’s$onEvent.

For a comparative example, see this http://jsrun.net/cxykp/edit.

Child parent component communicationYou can see the above example at http://jsrun.net/axykp/edit.

provide / inject

First, you need to see the official website tutorial https://cn.vuejs.org/v2/api/ ා.prviode / injectOnly added in Vue @ 2.2.0. This is also the author’s reference to react context. If you are familiar with react, this is a good understanding.

In the case of deep nesting of components, it will be a nightmare for us to use prop to transfer data layer by layer What should we do if the grandparent component wants to get the data of the grandparent directly without going through the grandparent component?provide / injectIt can solve this problem.

See the example http://jsrun.net/nxykp/edit.

It can be seen from the above example,provideImplementation andbeforeCreateandcreatedYou can also visitdataandinjectData.

Other means of communication

Besides the communication mode supported by Vue itself, is there any other way? Of course, vuex is the official data flow management library of Vue.

The above mentioned communication modes supported by Vue itself involve the communication of parent-child or child parent componentsNon parent child component communicationWhat about it? Through vuex, we can easily communicate with non parent-child components. We use Vue to support various ways of communication (including parent-child component, child parent component communication).

Combined with the idea of one-way data flow, can’t we manage data centrally in one place, and then each component can directly andstoreCommunication? The answer, of course, is what we do in vuex, which is consistent with the idea of react’s Redux, mobx and other class libraries.

This is how props communicates,component -> component

And the way that vuex communicates is like this,Component (transfer data) -> store -> (data change update component), which can be simply understood ascomponent -> store -> component。 We set up a data management layer in the middle, so that we can better manage the data, and the data flow conforms to the idea of one-way data flow. The data is fromstoreFlow tocomponentcomponentIt can be any nested level component.

In theory, we can also use Redux on Vue, but no one will. It’s not appropriate. Vuex is customized.

Reference articles

  • Six ways of communication between Vue components (complete version)

Learning and summary articles are published synchronously at https://github.com/xianshanna…, if you are interested, you can pay attention to them and learn and progress together.

Recommended Today

asp.net Application of regular expression

1. Balanced group / recursive matching (?’ Group ‘), which is called the corresponding content of group, and counts it on the stack;(?’- Group ‘), and count the corresponding content named group out of the stack(?!) Zero width negative look ahead assertion. Since there is no suffix expression, attempts to match always failRegular example:,{0,1}”5″:\[[^\[\]]*(((?’Open’\[)[^\[\]]*)+((?’-Open’\])[^\[\]]*)+)*(?(Open)(?!))\],{0,1} Test […]