I think the component communication idea in Vue is the same as React. It is one-way data flow, with the higher order flowing to the lower order (parent to child). The child component can only notify the parent component, and the data is still changed at the parent level instead of flowing.

1. props

High frequency use

The parent component passes parameters to the child component. Vue documentation: props

2. $emit

High frequency use

The child tells the parent to execute the corresponding function, which can take arguments. Vue documentation: $emit

3. $refs

It can also be used for DOM element manipulation

Communication from parent to child. You can directly access and invoke properties and methods on child components by setting the ref property on child components and using this.$refs objects to get instances. Vue documentation: refs

4. Vuex status Manager

Attention should be paid to the use of scenarios, which can well meet complex data interaction and barrier-free communication in SPA applications, but frequent use will increase the degree of code coupling.

It is mainly composed of four core components: State, Getters, Mutations and Actions. It is agreed that the change of data is only triggered by Mutations and triggered by store.mit, and the asynchronous operation is placed in Actions. Trigger with store.dispatch. Vuex official website document

5. $root,$parent,$children

Don’t often use

All three of these functions are directly literal. In terms of component communication, $root is not as good as Vuex, $parent is better than $emit, and there are few $children scenarios, because $refs is enough. Vue documentation: Handles boundary cases

6. .syncThe modifier

Not recommended

It was deleted ruthlessly and then added again to realize the “two-way binding” of data in communication. The concept of $emit goes against the principle of component communication, so it is not recommended to use it. In fact, the principle is to package $emit, which makes it write less code. Vue document: sync-modifier

7. $attrs

Commonly used in higher-order components

It is not usually used, but in scenarios with fine component granularity, none of the methods mentioned above can elegantly solve problems such as: Vuex will increase the coupling degree of the code in the case that C communicates with A when COMPONENT A is nested with component B and then with component C. $root is restricted to the fact that component A must be the root component. Is it possible to pass from A to B and then from B to C? Yes, but $attrs provides a way to pass “residual parameters” to make it easier to use, and a more intuitive example:

// In a. vue:

<template>
    <B name="shawn" id="1" /><! </template> <script>import B from './B.vue'.// In b.ue:<template> {{ $attrs }} <! -- display: {name: 'shawn'.id: '1'} -- ><C v-bind="$attrs" /><! </template> <script>import C from './C.vue'.props: { id } $attrs () {// function (props) {// function (props) {// function (props) {// function (props) {// function (props)

// In c.ue:<template> {{ $attrs }} <! -- display: {name: 'shawn' } -->
</template>
Copy the code

Vue documentation: attrs

8. $listeners

Commonly used in higher-order components

As with $attrs, we can add the v-on=”$listeners” attribute to the C component and use $emit to call the function mounted by the A component. Vue documents: Listeners

9. V – slot slot

This is common in componentized development, where communication within a component can be treated as passing template code

Note that slot and slot-scope are deprecated attributes of Vue and are not equal to V-slot. Vue documentation: V-slot

10. Event Bus

Use fewer

The typical publish-subscribe model, which I prefer to call event broadcast, is simple to use and strong in decoupling.

11. Route parameters are transmitted

Page jumps in SPA applications can be considered component changes, so communication between pages is also considered component communication

this.$router.push({
    name: 'xxx'.// Params uploads must contain name
    params: { /* This.$route.params... To get the * * / },
    query: { The /* argument is passed in the URL, meaning that the refresh will not be lost}})Copy the code

12. provide inject

Used when developing component libraries

Allows an ancestor component to inject a dependency to all of its descendants, provide sends down inject to receive. There is no usage scenario in service development. Vue document: provide- Inject