后面有专门进行状态管理的库,vuex和pinia
我觉得这个可能就像spring??? bean工厂???控制反转?猜测一下 哈哈哈
所以在实际开发中用的很少,因为后面就用库了
provide和inject,依然基于组件树(了解)
父组件里面写provide传递
所有各个层次的子组件里写inject就可以接收
注意provide一般都是写成函数的,因为对象是没有作用域的
就像data一样,写法一样,为了可以使用this
provide(){
return{
age:this.name
}
}
全局事件总线(掌握)
事件总线
想想之前学过的操作系统和计算机网络中的总线,应该是概念上的类似。
尤其是计算机网络中的总线模式,谁都可以发送信息,对应的pc进行接收。
流程:
1.在全局中导入总线的工具
在项目中创建一个utils文件夹,引入这个工具
导入后给它重命名一下
import { HYEventBus } from 'hy-event-store'
const eventBus = new HYEventBus()
export default eventBus
2.在局部组件中用事件总线工具发出事件
自定义事件,都是用emit传出事件,就是用eventBus.emit
methods: {
bannerBtnClick() {
console.log("bannerBtnClick")
eventBus.emit("whyEvent", "why", 18, 1.88)
}
}
3.其他的组件谁监听谁响应
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}`
})
}
但是不推荐在父子组件之间用这个,因为官方不推荐。
所以主要适用于跨组件。
可以不会自己手写,但一定要会用第三方的库
前面的两个库都没有在维护了。
created我不太了解,需要补一下
事件取消
当组件销毁的时候,相应的事件监听也要销毁掉。
但是很多项目开发的时候是不移除的,但最好还是要移除。
在需要被销毁的组件中的中取消监听:unmounted(){ }
umounted()是组件销毁时使用的函数,卸载函数
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)
}
}