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

vue中组件之间的通信方式

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

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

【幼儿园收费管理系统】——中小型幼儿园收费管理的好帮手!

为了让幼儿园收费管理更加高效、便捷,我们推出了《幼儿园收费管理系统》!这款软件专为中小型幼儿园设计,集基础信息、幼儿管理、收费管理、车辆管理、生日提醒、报表统计等功能于一身,是您管理幼儿园的得力助手!一、基础设置:一款好的软件,首先要让您轻松上手。我们的系统提供了幼儿园信息、年级设置、班级设置、餐...

高效使用 Vim 编辑器的 10 个技巧

在 Reverb,我们使用 MacVim 来标准化开发环境,使配对更容易,并提高效率。当我开始使用 Reverb 时,我以前从未使用过 Vim。我花了几个星期才开始感到舒服,但如果没有这样的提示,可能需要几个月的时间。这里有十个技巧可以帮助你在学习使用 Vim 时提高效率。1. 通过提高按键重复率来...

30 个纯 HTML5 实现的游戏

浏览器和 JavaScript 的功能逐年不断的变强变大。曾几何时,任何类型的游戏都需要Flash。但随着 HTML5 发展,HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏,它们可以在所有现代浏览器中运行,并且只使用web技术构建。1. HexGL地址:http://...

双子座应用程序推出模型切换器以在Android上访问2.0

#头条精品计划# 快速导读谷歌推出了Gemini 2.0 Flash实验版,现已在其安卓应用中可用,之前仅在gemini.google.com网站上提供。新版本的15.50包含模型切换器,用户可以在设置中选择不同模型,包括1.5 Pro、1.5 Flash和2.0 Flash实验版。谷歌提醒,2.0...

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

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

vue3使用vue-router路由(路由懒加载、路由传参)

vue-router 是 vue的一个插件库1. 专门用来实现一个SPA单页面应用2 .基于vue的项目基本都会用到此库SPA的理解1) 单页Web应用(single page web application,SPA)2) 整个应用只有一个完整的页面3) 点击页面中的链接不会刷新页面, 本身也不会向...