Introduction: Communication between components, includingChild component ===> parent component communication, parent component === => child component communication, and communication between any componentsThere are three cases, and the specific methods are introduced below:

1. Component custom events

This applies to the communication of the child component ===> parent component

  1. Usage scenario: A is the parent component and B is the child component. If B wants to send data to A, it needs to bind custom events to B in A (the event callback is in A).

  2. Bind custom events:

    1. The first way, in the parent component: < demo@mytest =”test”/> or

    2. The second way, in the parent component:

      <Demo ref="demo"/ >...mounted(){
   this.$refs.xxx.$on('mytest'.this.test)
}
Copy the code

    3. To make a custom event fire only once, you can use the once modifier, or the $once method.

  3. Emit custom event: this.$emit(‘mytest’, data)

  4. Unbind custom event this.$off(‘mytest’)

  5. Native DOM events can also be bound to components, requiring the use of native modifiers.

  6. Note: when using this.$refs.xxx.$on(‘mytest’, callback) to bind a custom event, either the callback is configured in Methods or the arrow function is used, otherwise the this pointer will fail!

2. GlobalEventBus

Applicable to communication between any components

  1. Install the global event bus:

    new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this // Install the global event bus. $bus is the vm currently applied},... })Copy the code

  2. Using the event bus:

    1. Receive data: if component A wants to receive data, it binds A custom event to $bus in component A. The callback of the event remains with component A itself.

      methods(){
  demo(data){... }}...mounted() {
  this.$bus.$on('xxxx'.this.demo)
}
Copy the code

    2. This.$bus.$emit(‘ XXXX ‘, data)

  3. It is best to use $off in the beforeDestroy hook to unbind events used by the current component.

3. Message subscription and publishing

Applicable to any communication between components using steps:

  1. Install pubsub: NPM I pubsub-js

  2. Import pubsub from ‘pubsub-js’

  3. Receive data: If component A wants to receive data, it subscribes to the message in component A, and the subscribed callback remains in component A itself.

    methods(){
  demo(data){... }}...mounted() {
  this.pid = pubsub.subscribe('xxx'.this.demo) // Subscribe to the message
}
Copy the code

  4. Publish (‘ XXX ‘, data)

  5. It is best to unsubscribe with pubsub. unsubscribe(PID) in the beforeDestroy hook.

4. The slot slot

For parent component === => Child component function: allows parent component to insert HTML structure to child component specified location, is also a way of communication between components divided into default slot, named slot, scope slot

5.vuex

A Vue plug-in for centralized state (data) management in Vue application, centralized management (read/write) of the shared state of multiple components, is also a way of communication between components: when multiple components need to share data