vue组件通信的多种方法详解
更新时间：2021年11月16日 08:41:00 作者：RxinY924
这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
说起组件通信，可能大家耳熟能详的有以下5种：
1. 父传子
父组件通过自定义属性给子组件传值，子组件用props接收
2. 子传父
父组件在子组件标签上自定义事件，子组件通过$emit来触发自定义事件，并且可以传递参数
3. 非父子组件传值
eventBus事件总线：
可通过eventBus进行信息的发布与订阅（创造一个都能访问到的事件总线）
4. vuex
vuex是专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理程序的所有组件的状态，解决多组件通信。不过多用于中大型项目，小型项目用它会显得臃肿。
5. refs
通过添加ref和·$refs·配合，也可以很方便的获取子组件，访问调用子组件的属性和方法
关于refs，我还另外单独写过一篇详细用法的，refs的用法
除开以上5种，还有5种不那么常见的组件通信方法：
6. $children
父组件中·$children·返回的是一个组件集合，如果清楚知道子组件的顺序，也可以使用下标操作
7. $parent
子组件中this.$parent指向父组件，子组件无法直接修改父组件中的数据，可以通过this.$parent让父组件自己去改
例如：
this.$parent.xxx=200
this.$parent.fn()
8. provide & inject
成对出现：provide和inject是成对出现的
作用：用于父组件向子孙组件传递数据
使用方法：
- provide在父组件中，返回要传给下级的数据
- inject在需要使用这个数据的子孙组件中注入数据。（不论组件层次有多深）
9. $attrs
用于父组件给孙组件传递数据
10. $listeners
用于孙组件给父组件传递数据
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要为大家详细介绍了vue实现纯前端表格滚动分页加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue change阻止默认事件问题,使用事件 @click.stop.native.prevent 解决 (使用@click.stop 或者 @click.prevent都无效，直接报错还阻止不了事件)，需要的朋友可以参考下2022-01-01
今天看了vuejs的组件，看到了prop组件，主要作用是在传入数据的时候对传入的值做判断，今天小编通过一个小例子给大家分享VueJs组件prop验证简单理解，感兴趣的朋友一起看看吧2017-09-09
v-model 是 vue.js 提供的语法糖，根据不同的表单控件监听不同的事件，实现对表单控件的数据双向绑定。这篇文章主要介绍了vue 表单输入格式化中文输入法异常,需要的朋友可以参考下2018-05-05
近期项目需求相关地图限定使用百度地图,功能比较简单,下面这篇文章主要给大家介绍了关于Vue2项目中对百度地图的封装使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家介绍了Vue的监听属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
今天小编就为大家分享一篇vue slots 组件的组合/分发实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了在vue项目中利用popstate处理页面返回的操作介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本篇内容给大家总结了VUE的重要难点，并把代码做了详细分享，有兴趣的朋友参考学习下。2018-03-03
本文记录了使用Vue3+Vite+ElementPlus从0开始搭建一个前端工程会面临的常见问题，没有技术深度，但全都是解决实际问题的干货，可以当作是问题手册以备后用，感兴趣的朋友参考下2023-12-12
最新评论