VUE - non-parent-child communication (understand)

There are libraries dedicated to state management, vuex and pinia.
I think this may be like spring? ? ? bean factory? ? ? Inversion of control? Guess hahaha
, so it is rarely used in actual development, because the library will be used later

Provide and inject are still based on the component tree (understand)

Write provide in the parent component to pass,
write inject in all sub-components at all levels to receive

Note that provide is generally written as a function, because objects have no scope,
just like data, written in the same way, in order to use this

provide（）{
    
    
return{
    
    
	age：this.name
		}
}

Global Event Bus (master)

Event bus
Think about the bus in the operating system and computer network that you have learned before, it should be conceptually similar.
Especially in the bus mode in the computer network, anyone can send information, and the corresponding PC can receive it.

Process:
1. Import bus tools globally

Create a utils folder in the project, import this tool

and rename it after importing

import {
    
     HYEventBus } from 'hy-event-store'

const eventBus = new HYEventBus()

export default eventBus

2. Use the event bus tool to emit events in local components
Custom events, all use emit to send out events, that is, use eventBus.emit

 methods: {
    
    
      bannerBtnClick() {
    
    
        console.log("bannerBtnClick")
        eventBus.emit("whyEvent", "why", 18, 1.88)
      }
    }

3. Other components who listen and respond

 import eventBus from './utils/event-bus'
 //导入事件总线工具，这里因为是export default，所以不用加{}，直接导入

//在created（）{}中监听
 created() {
    
    
      // fetch()
	  //注意这里必须要使用箭头函数，因为this的作用域必须在整个app内，它得成功指向message
      // 事件监听
      eventBus.on("whyEvent", (name, age, height) => {
    
    
        console.log("whyEvent事件在app中监听", name, age, height)
        this.message = `name:${
      
      name}, age:${
      
      age}, height:${
      
      height}`
      })
    }

But it is not recommended to use this between parent and child components, because it is not officially recommended.
So mostly for cross-components.

You may not be able to write by yourself, but you must be able to use third-party libraries. The
previous two libraries are not being maintained.


created I don't know much, need to make up

event canceled

When the component is destroyed, the corresponding event listener is also destroyed.
However, many projects are not removed during development, but it is best to remove them.
Cancel the listener in the component that needs to be destroyed: unmounted(){ }
umounted() is the function used when the component is destroyed, the uninstall function

 export default {
    
    
    methods: {
    
    
      whyEventHandler() {
    
    
        console.log("whyEvent在category中监听")
      }
    },
    created() {
    
    
    //注意这里必须要把监听时的方法（参数）放到methods中，这样后面off消除中的this才可以取消掉你监听的处理
      eventBus.on("whyEvent", this.whyEventHandler)
    },
    unmounted() {
    
    
      console.log("category unmounted")
      eventBus.off("whyEvent", this.whyEventHandler)
    }
  }