Vue summary: Communication between components (parent and child, brother, any two components, nested multiple components)

Vue communication mode:

1. Props, EMIT (the most common parent-child communication method)

The parent component passes in a property and the child component receives it via props. Internally, the parent component uses the child $emit(event name, parameter passed) to pop up a custom event. The parent component listens for the event and gets the parameters from the child component

/ / the parent component
<hello-world msg="hello world!" @confirm="handleConfirm"><hello-world>
/ / child component
 props: {
    msg: {
      type: String.default: ' '
    }
  }，
  methods：{
  	handleEmitParent(){
  		this.$emit('confirm', list)
  	}
  }
Copy the code

2. EventBus (commonly used for communication between any two components)

How it works: Registered events are stored and called when an event is triggered. Defining a class to handle events and attaching it to this of a Vue instance can register and trigger events, as well as extend some event management

class Bus {
  constructor () {
    this.callbackList = {}
  }

  $on (name, callback) {
    // Register events
    this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
  }

  $emit (name, args) {
    // Trigger the event
    if (this.callbackList[name]) {
      this.callbackList[name].forEach(cb= > cb(args))
    }
  }
}

Vue.prototype.$bus = new Bus()

// Any two components
// Component 1: Deregisters events in component mounted()
this.$bus.$on('confirm', handleConfirm)

// Component 2: trigger event (e.g. : execute trigger event after clicking event)
this.$bus.$emit('confirm', list)

Copy the code

3. Vuex state management (the core plug-in of VUE, used for any communication of any component, it should be noted that Vuex data may be lost after refreshing)

Create a globally unique state management warehouse (store), have synchronous (mutations), asynchronous (actions) way to manage data, have cache data (getters), but also can be divided into modules easy maintenance, details can visit the Vuex document below to learn

vuex.vuejs.org/zh/

4.
$parent /$Root / $children (not recommended, not easy to maintain later, if the page hierarchy changes, need to reconsider the hierarchy)

Sibling communication with the parent component as a bridge to register events and trigger events

// Subcomponent 1:
this.$patent.$on('confirm', handleConfirm)
// Subcomponent 2:
this.$patent.$emit('confirm', list)
Copy the code

Gets the data of the first child component and calls the methods of the root component

// Get the data of the first child
console.log(this.$children[0].msg)

// Call the root component's method
this.$root.handleRoot()
Copy the code

5. $ref ($ref, $ref)

Methods commonly used by parent components to call child components (such as list data changes notifying child components to rerender lists) are provided by Vue
$/ / Mounted to retrieve the ref attribute. If two refs with the same name are specified, this will be used.$Refs. XXX will be an array

/ / in the template
// ...
<hello-world ref="hello"></hello-world>
// ...
export default {
  mounted(){
    // Invoke the method of the referenced child component
    this.$refs.hello.handleRef()
  }
}
Copy the code

6.
$attrs /$Listeners (often used to encapsulate native components)

$attrs gets properties passed in by the parent component but not received by props

/ / the parent component
<Child :title="title" :desc="desc" >/>

// inside the child component
<template>
<div>
  <h2>{{title}}</h2>
  <p>{{$attrs.desc}}</p>
</div>
</template>	
<script>
export default {
  props: ['title']
  // ...
}
<script>

Copy the code

$Listeners are often used for higher levels of encapsulation. For example, two components on the same page can trigger click events in the same way.

/ / the parent component
<div>
  <child-first @click="handleClick"></child-first>
  <child-second @click="handleClick"></child-second>
</div>
export default {
  methods: {
    handleClick: (){
      alert('hello')}}}// child-first
<div v-on="$listeners"></div>

// child-second
<div v-on="$listeners"></div>
Copy the code

7. Provide/inject (ancestors and descendants)

In some cases, multiple components are nested and encapsulated in such a way that the descendant components inside a top-level component need to use the data of the top-level component

// Top-level component
export default {
  provide(){
    return {
      msg: 'hello world! '}}}// Descendant components
export default {
  inject: ['msg']}Copy the code