当前位置:网站首页>非父子组件的通信
非父子组件的通信
2022-07-07 03:12:00 【要成为光的女人】
这里我们主要讲两种方式:
- Provide/Inject
- Mitt全局事件总线;
一、Provide和Inject(子孙级)
Provide/Inject 用于非父子组件之间共享数据:
- 比如有一些深度嵌套的组件,子组件想要获取父组件的部分内容;
- 在这种情况下,如果我们仍然将props沿着组件链逐渐传递下去,就会非常的麻烦;
对于这种情况下,我们可以使用Provide和Inject:
- 无论层级结构有多深,父组件都可以作为其所有子组件的依赖提供者;
- 父组件有一个provide 选项来提供数据
- 子组件有一个inject 选项来开始使用这些数据
Provide和Inject 的使用
在真实开发里面provide里面的数据不是写死的,可能来自于服务器,这时候要想拿到data里面的数据,vue建议最好将proviede写成一个函数。
处理响应式数据:
注意:上一案例中我们的数据一次性,当我们数据发生变化的时候,Provide里面的数据是无任何响应变化的,(computed箭头函数是不绑定this的,也就是说我们现在给length赋值的时候,是赋的computed函数的返回值,因为computed里面的this是对data里面的值是有依赖的,一旦依赖发生改变,computed的值就会重新计算,会有一个新的值,就会给length赋值新的值。)
使用:
二、全局事件总线mitt库
1.先安装
npm install mitt -D
2.其次,我们可以封装一个工具eventbus.js:
3.使用
监听事件:在生命周期里监听,也是拿到emitter对象
Mitt事件取消
//取消emitter中所有的监听
emitter.all.clear()
//定义一个函数
function onFoo(){}
emitter.on('foo',onFoo) //监听
emitter.off('foo',onFoo) //取消监听
边栏推荐
猜你喜欢
String (explanation)
How can clothing stores make profits?
Cloudcompare point pair selection
Linear algebra (1)
Sword finger offer high quality code
How to do sports training in venues?
After the promotion, sales volume and flow are both. Is it really easy to relax?
从零到一,教你搭建「CLIP 以文搜图」搜索服务(二):5 分钟实现原型
剑指offer-高质量的代码
2018 Jiangsu Vocational College skills competition vocational group "information security management and evaluation" competition assignment
随机推荐
How to install swoole under window
Matlab tips (30) nonlinear fitting lsqcurefit
化工园区危化品企业安全风险智能化管控平台建设四大目标
JESD204B时钟网络
Abnova 体外转录 mRNA工作流程和加帽方法介绍
. Net core accesses uncommon static file types (MIME types)
[GNN] graphic gnn:a gender Introduction (including video)
Kotlin之 Databinding 异常
MySQL user permissions
Config分布式配置中心
华为机试题素数伴侣
剑指offer-高质量的代码
Abnova 免疫组化服务解决方案
leetcode 509. Fibonacci Number(斐波那契数字)
服装门店如何盈利?
【luogu P1971】兔兔与蛋蛋游戏(二分图博弈)
使用TCP/IP四层模型进行网络传输的基本流程
String (explanation)
【mysqld】Can't create/write to file
Leetcode T1165: 日志分析