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

vue中组件之间的通信方式

ruisui885个月前 (01-07)技术分析64

** 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中组件之间的通信方式” 的相关文章

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、computed 等需要先引入才能使用,但是本篇文章介绍的 defineProps、withDefaul...

快速上手React

web前端三大主流框架1、Angular大家眼里比较牛的框架,甚至有人说三大框架中只有它能称得上一个完整的框架,因为它包含的东西比较完善,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能。对于刚开始学习使用框架的小伙伴们,可以推荐这个框架,学会之后简直能颠覆之前你对前端开发的认...

摄影后期必看 | PS插件camera raw 16.4教程 | 范围蒙版

范围蒙版Camera Raw 【蒙版】模块中提供了三个范围蒙版工具,可以通过特定的范围来创建蒙版。此次新增的【范围蒙版】大大加强了acr插件对局部调整的能力。点击下拉小箭头可以看到【颜色范围】,可用于快速选择想要编辑的颜色。快捷键:Shift + C【明亮度范围】,可用于快速选择想要调整的明亮度。快...

vue v-html动态生成的html怎么加样式/事件

1、动态生成的html,样式不生效//html 布局 <view v-html="html"> {{html}} </view> //动态生成的元素 <view class="btngo" @tap="handleLink...

有效地简化导航-Part 1:信息架构

「四步走」——理想的导航系统要做一个可用的导航系统,网页设计师必须按顺序回答以下4个问题:1. 如何组织内容?2. 如何解释导航的选项?3. 哪种导航菜单最适合容纳这些选项?4. 如何设计导航菜单?前两个问题关注构建和便签内容,通常称为信息架构。信息架构师通常用网站地图(site map diagr...

别让“跑焦”毁所有!仅需这一项设置,即可显著改善镜头对焦精度

我常常会收到一些摄影爱好者的私信,也一直在努力的帮助大家解决更多摄影中常见问题。在我收到的所有问题中。有一个问题是最麻烦的,那就是“为什么我的图像看起来模糊?”。这个问题几乎每个人都遇到过,究其原因可以说是多种多样相对复杂。起初我一直认为是对焦问题所导致,也就有了我之前所写的“后按对焦”以及“对焦模...