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.
Here is a list of the communication modes supported by Vue itself:
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
$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 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.
For the official website tutorial, you can see listening to sub component events.
$emitIt is the subscription publishing mode of Vue, and you can customize events. stay
Child parent component communicationThis mode can be used instead of prop callback mode, which is relatively convenient.
For each component
$emitThey are all independent,
$emitOnly the current component’s
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,
createdYou can also visit
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 and
storeCommunication? 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,
And the way that vuex communicates is like this,
Component (transfer data) ->
(data change update component), which can be simply understood as
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 from
componentIt 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.
- 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.