In fact, there are many methods of Vue parent-child component communication, this article is just a summary, about their advantages and disadvantages, specific how to use the relevant documents and online god has summarized a lot of, here will not explain.

1.Vuex

introduce

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool, DevTools Extension, which provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, and so on.

Vuex is one of the tools I often use in my daily projects, and I believe you will also use it frequently in your projects

Method of use

Official portal

The advantages and disadvantages

  • advantages
    • The tedious event propagation between multiple layers of components is resolved.
    • Solve the problem of multi-component dependencies in the same state.
    • Unidirectional data flow
    • Tailored for Vue, learning costs are not high
  • disadvantages
    • Can not do data persistence, refresh the page to remake, to do data persistence can consider using localstorage.
    • Add extra code volume that is not recommended for simple business scenarios.

2.EventBus

introduce

By sharing a vUE instance, use the instance’s $ON and $EMIT for data transfer.

Method of use

Here is a simple way to use it

// bus.js
import Vue from 'vue'
export default new Vue({})

// component-a.js
import bus from './bus.js'
export default {
  created () {
    bus.$on('event-name', (preload) => {
      // ...}}})// component-b.js
import bus from './bus.js'
export default {
  created () {
    bus.$emit('event-name', preload)
  }
}
Copy the code

The advantages and disadvantages

  • advantages
    • The tedious event propagation between multiple layers of components is resolved.
    • The principle of use is very simple, less code.
  • disadvantages
    • Since all Vue instances are used, repeated triggering scenarios are easy to occur, such as:
      1. In multiplayer development, A and B define the same event name.
      2. Both pages have the same event name defined and are not destroyed by $off (often during route switching).
      3. Register in the for component.
    • Managing events in this way would be confusing for a large project, so VUex is recommended.

3. The props and $emit / $on

introduce

The basic way is that the parent component passes data to the child component, passing our custom attributes to the child component. The child component triggers the v-on event of the parent component through the $emit method, so that the child component triggers the parent component method

Method of use

Props uses a portal

$emit/$ON uses the portal

The advantages and disadvantages

  • advantages

    • The simplest to use and the most common way to pass parent-child components.
    • Vue provides type checking support for props.
    • $emit does not modify to events of the same name in other components because it can only fire parent events, unlike event-bus

  • disadvantages

    • A single component hierarchy needs to be passed layer by layer, resulting in a lot of unnecessary code.
    • Failed to solve the problem of multiple component dependencies in the same state.

Tips

$Listeners can inherit the props and event listeners of the parent component to child elements, where they can call the events and props of the parent component

$attrs Uses the portal

$Listeners use the portal

4.provide/inject

introduce

The parent component provides data/methods to the descendant component, and the descendant component receives injected data/methods through inject.

Method of use

Official portal

The advantages and disadvantages

  • advantages
    • Instead of passing layers like props, you can pass layers.
  • disadvantages
    • Properties passed this way are non-responsive, so pass static properties whenever possible.
    • To quote the official websiteIt couples your application in its current component organization, making refactoring more difficult.In my understanding of this sentence, provide/inject is used and you need to follow its component organization mode. If you want to destroy this organization mode during project reconstruction, there will be extra development cost. In fact, event-Bus also has this problem.

5.slot

introduce

You can add custom content to the component’s HTML template. This content can be any code template, such as:

<navigation-link url="/profile">
  <! Add a Font Awesome icon -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>
Copy the code

Everything in the parent component template is compiled in the parent scope; Everything in the subcomponent template is compiled in the subscope.

You can also use the slot-scope property to pass information from a child to a parent. Note that this property is new to vue2.1.0+.

Method of use

Official portal

The advantages and disadvantages

  • advantages
    • It is possible to customize what is inserted into the child from the parent component, although other attributes are also possible, but I think slot is more likely to be custom conditioned from the parent container.
    • Good reuse, suitable for component development.
  • disadvantages
    • As with props, cross – level passing is not supported.

6.$parent/$children

introduce

$parent/$children: $parent/$children: $parent/$children: $parent/$children This is not recommended.

Method of use

Get the parent or child instance with this.$parent or this.$children. Official portal

The advantages and disadvantages

  • advantages
    • You can take the parent component instance and own all the properties in the instance.
  • disadvantages
    • Components written this way are difficult to maintain because you don’t know where the data is coming from, contrary to the principle of one-way data flow
    • this.$childrenYou get an array, and you can’t exactly locate the subcomponents you’re looking for, especially if there are many.