当前位置:首页 > 技术分析 > 正文内容

vue中组件之间的通信方式

ruisui884个月前 (01-07)技术分析35

** 1.1 父子组件**
a. 父向子传数据: 第1种: 父通过属性传值,子组件通过props接收数据(
注:props传过来的数据是单向的,不可以进行修改)
第2种:子组件可以通过$parent来获取父组件里的数据和调用父组件的方法(
注:数据是双向的,还要注意如用了UI组件并且在该UI组件里重新定义一个新的组件,那么在子组件里需要$parent.$parent来获取数据和调用方法
b. 子向父传数据: 第1种: 子组件通过$emit触发父组件的自定义事件,并进行传值,父组件通过自定义事件进行接收数据。
第2种:可以给子组件注册一个引用信息ref,然后父组件就可以通过$refs来获取子组件里面的数据和调用子组件里的方法。

** 1.2 祖孙级嵌套深的组件**
第一种: 通过在父组件provide提供一个变量,然后在孙组件inject引入这个变量(
注:祖向孙传数据,但不是响应式的,所以要传入一个可以监听的对象,如Array和Object
代码如下:
// 祖组件
provide () {
return {
msg: this.data
}
}
// 孙组件
inject: ['msg']
// 然后在计算属性里取值
computed: {
newValue () {
return this.msg
}
}

** 1.3 页面之间(没有关系的组件)**
第一种:简单传一个字段,我们可以通过路由中的query进行传值,然后通过$route.query来获取数据(不实用)
第二种: 事件总线
1.在项目中main.js文件引入全局的Vue.prototype.$EventBus = new Vue()
2.通过$EventBus.$emit来传数据,通过$EventBus.$on来接收数据
注意: 1为什么第一次传数据$on没有被触发
** 答:我们在A页面通过$emit传数据的时候,B页面还没有被生成,所以$on事件没有被触发。B页面在created和mounted后,才会执行A页面的beforeDestory,所以要把$emit事件放在A页面beforeDestory ** 的生命周期里,那么这时B页面已经生成,所以第一次$on事件会被触发。**
** 2 接下来的每一次传数据,之前的$on事件没有被撤销,还一直存在**
** 答:我们在B页面的created和mounted里来接收数据,但是要记住在B页面销毁的时候,要通过$EventBus.$off()来进行手动删除。**

第三种: Vuex

本人自己的一些简单理解,仅供参考。如有问题欢迎评论,一起学习。。。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/93.html

分享给朋友:

“vue中组件之间的通信方式” 的相关文章

Lindroid开源应用:在安卓手机 / 平板上安装 Linux发行版

IT之家 6 月 19 日消息,Erfan Abdi 本月发布了 Lindroid 开源应用程序,让用户可以在安卓手机上安装 GNU / Linux 发行版,在完全支持手机硬件的情况下可以运行 Linux 应用程序。Lindroid 开源应用程序就是将 Linux 放入容器中,使用 Halium 等...

GitLab-创建分支

描述分支是独立的生产线,是开发过程的一部分。分支的创建涉及以下步骤。创建一个分支步骤1-登录您的GitLab帐户,然后转到“ 项目”部分下的项目。步骤2-要创建分支,请单击“ 存储库”部分下的“ 分支”选项,然后单击“ 新建分支”按钮。步骤3-在“ 新建分支”屏幕中,输入分支的名称,然后单击“ 创建...

一次Java内存占用高的排查案例,解释了我对内存问题的所有疑问

问题现象7月25号,我们一服务的内存占用较高,约13G,容器总内存16G,占用约85%,触发了内存报警(阈值85%),而我们是按容器内存60%(9.6G)的比例配置的JVM堆内存。看了下其它服务,同样的堆内存配置,它们内存占用约70%~79%,此服务比其它服务内存占用稍大。那为什么此服务内存占用稍大...

Acustica Audio 发布模拟Roland Jupiter 双声道合成器插件 TH2

福利: Acustica Audio 发布模拟Roland Jupiter 风格的双声道合成器插件 TH2 免费下载 意大利 Acustica Audio 公司发布布模拟Roland Jupiter 风格的双声道合成器插件 TH2 ,灵感来源于Acustica Audio的THING-8系列,它是...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...

thinkphp8+vue3微信小程序商城,发布公众号App+SAAS+多商户

项目介绍三勾小程序商城基于thinkphp8+vue3+element-ui+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。支持主题色+自定义头部导航+自定义...