VUE——非父子间通信(了解)


后面有专门进行状态管理的库,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)
    }
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值