当前位置:网站首页>Communication between non parent and child components
Communication between non parent and child components
2022-07-07 07:09:00 【To be a woman of light】
Here we mainly talk about two ways :
- Provide/Inject
- Mitt Global event bus ;
One 、Provide and Inject( Descendants )
Provide/Inject Used to share data between non parent and child components :
- Such as the Some deeply nested components , The child component wants to get part of the content of the parent component ;
- under these circumstances , If we still take props Gradually pass along the component chain , It's going to be a lot of trouble ;
In this case , We can use Provide and Inject:
- No matter how deep the hierarchy is , The parent component can be used as the of all its child components Dependent provider ;
- The parent component has one provide Options To provide data
- The subcomponents are One inject Options To start using this data
Provide and Inject Use
In real development provide The data in it is not written dead , From the server , At this time, if you want to get data The data in it ,vue It is suggested that it is best to proviede Write it as a function .
Process responsive data :
Be careful : In the last case, our data is one-time , When our data changes ,Provide The data inside does not respond to changes ,(computed The arrow function is not bound this Of , That is to say, we now give length When you assign , Yes computed The return value of the function , because computed Inside this It's right data The value inside is dependent , Once the dependency changes ,computed The value of will be recalculated , There will be a new value , Will give you length Assign a new value .)
Use :
Two 、 Global event bus mitt library
1. Install first
npm install mitt -D
2. secondly , We can encapsulate a tool eventbus.js:
3. Use
Monitoring events : Monitor in the life cycle , Also get emitter object
Mitt Event cancellation
// Cancel emitter All monitors in
emitter.all.clear()
// Define a function
function onFoo(){}
emitter.on('foo',onFoo) // monitor
emitter.off('foo',onFoo) // Cancel monitoring
边栏推荐
- Precise space-time travel flow regulation system - ultra-high precision positioning system based on UWB
- How can flinksql calculate the difference between a field before and after update when docking with CDC?
- 关于数据库数据转移的问题,求各位解答下
- Bus消息总线
- Basic introduction of JWT
- Release notes of JMeter version 5.5
- Advantages of using net core / why
- ANR 原理及实践
- 詳解機器翻譯任務中的BLEU
- LC 面试题 02.07. 链表相交 & LC142. 环形链表II
猜你喜欢
Use of completable future
非父子组件的通信
多个kubernetes集群如何实现共享同一个存储
Bus消息总线
Academic report series (VI) - autonomous driving on the journey to full autonomy
How DHCP router works
Graduation design game mall
Lvs+kept (DR mode) learning notes
7天零基础能考证HCIA吗?华为认证系统学习路线分享
. Net 5 fluentftp connection FTP failure problem: this operation is only allowed using a successfully authenticated context
随机推荐
服装门店如何盈利?
js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告
Config分布式配置中心
2018 Jiangsu Vocational College skills competition vocational group "information security management and evaluation" competition assignment
$parent(获取父组件) 和 $root(获取根组件)
This article introduces you to the characteristics, purposes and basic function examples of static routing
freeswitch拨打分机号源代码跟踪
[Luogu p1971] rabbit and egg game (bipartite game)
一文带你了解静态路由的特点、目的及配置基本功能示例
Please ask a question, flick Oracle CDC, read a table without update operation, and repeatedly read the full amount of data every ten seconds
Tool class: object to map hump to underline underline hump
Leetcode t1165: log analysis
详解机器翻译任务中的BLEU
Abnova circulating tumor DNA whole blood isolation, genomic DNA extraction and analysis
[noi simulation] regional division (conclusion, structure)
Precise space-time travel flow regulation system - ultra-high precision positioning system based on UWB
Special behavior of main function in import statement
Please answer the questions about database data transfer
Circulating tumor cells - here comes abnova's solution
How can gyms improve their competitiveness?