vue组件之间的通讯

最新推荐文章于 2022-12-08 23:50:14 发布
最新推荐文章于 2022-12-08 23:50:14 发布
阅读量104 收藏
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qr1433223/article/details/118973682
版权
本文详细介绍了Vue中组件间的四种通信方式：父传子通过props，子传父通过触发父组件方法，兄弟组件间借助中央事件总线，以及使用Vuex进行状态管理。通过实例解析了如何在不同场景下选择合适的方式进行数据传递，帮助开发者更好地理解和掌握Vue应用的数据流动。
摘要由CSDN通过智能技术生成 
                              **vue组件之间的通讯**

(1)父传子
父组件
在这里插入图片描述
子组件通过props接收数据
在这里插入图片描述

（2）子传父
因为是单向数据流所以只能通过触发父组件的方法改变数据
子组件
在这里插入图片描述
父组件

在这里插入图片描述
在这里插入图片描述
（3）兄弟组件传值中央事件总线
1、 main.js文件创建一个vue实例
在这里插入图片描述
2、引入main.js文件使用$emit传值
在这里插入图片描述
在这里插入图片描述
(3)vuex
state存放属性、getters计算属性、mutations同步修改数据、actions异步修改数据的方法
modules当数据量大时可以把单个属性拆分成一个模块
直接访问
state和getters
在compute或者在模板上直接访问
在这里插入图片描述
模板上访问
在这里插入图片描述
在这里插入图片描述

 访问mutations和action

在这里插入图片描述
**加粗样式
下次接着写对应的辅助函数 mapstate、mapgetters、mapmutations、mapactions

醉阑珊᭄ꦿ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件间通信的13种方式
longfan_的博客
06-16 1万+
vue组件间通信的13种方式
Vue组件化通讯的实例代码
08-30
Vue组件之间的通信也是非常重要的一部分。Vue提供了多种通信方式，包括但不限于以下几种： - **props**：父组件向子组件传递数据。 - **事件（Event Bus）**：子组件通过`$emit`发送事件，父组件通过监听事件来接收...
vue组件之间的通信
zhuzongzhi856的博客
03-14 392
7、vue 组件之间的通信提示：情况一：组件很多，且通信复杂 => 建议使用vuex;情况二：组件不多 => 建议使用事件触发$emit 和监听 $on;主要介绍情况二：7.1 兄弟组件(或者 完全不相关的组件)创建事件中心（即new vue()）let Hub = new Vue();组件1：触发Hub.$emit('myClick'[, param ...]);组件2：监听Hub....
vue中的组件通信
TeFuir__Lv的博客
12-08 1212
vue中的组件通信
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue组件通信
qq_67983277的博客
11-09 724
vue组件通信
vue 通过下拉框组件学习vue中的父子通讯
08-28
在 Vue 组件化开发中，父子组件之间的通讯是非常重要的。父子组件之间的数据传递是组件化开发的关键所在。这篇文章主要介绍了 Vue 通过下拉框组件学习 Vue 中的父子通讯的相关知识，涵盖了父组件和子组件的实现代码...
vue 使用eventBus实现同级组件的通讯
08-27
Vue.js 是一个流行的前端框架，它提供了多种方式来实现组件之间的通讯，其中之一就是使用 EventBus。EventBus 是一个中央事件总线，允许组件之间相互通讯。今天，我们将学习如何使用 EventBus 实现同级组件的通讯。 ...
Vue父子组件之间的通信实例详解
12-08
在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件...
Vue中父子组件通讯之todolist组件功能开发
08-27
在Vue.js框架中，父子组件通信是一项基础且重要的功能，它允许组件之间共享数据和行为，以实现更复杂的交互。本文将深入探讨如何在Vue中实现一个todolist组件，以及如何进行组件拆分和数据传递。 首先，我们来看一...
vue组件间的通讯的10种方法
Serena_tz的博客
05-09 5564
1.props/$emit props主要用于父组件传递数据给子组件，父==>子。 Vue自定义事件 父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件 仅仅用于父子组件传递，不适用于 三层及其以上 2. $emit/$on 这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当
Vue-组件通信6种方式
weixin_44286392的博客
08-16 1931
组件通信方式
Vue 组件通信方式全面详解
大灰狼的小绵羊哥哥的博客
03-02 2290
众所周知，Vue 主要思想之一就是组件式开发。因此，在实际的项目开发中，肯定会以组件的开发模式进行。形如页面和页面之间需要通信一样，Vue 组件和组件之间肯定也需要互通有无、共享状态。接下来，我们就悉数给大家展示所有 Vue 组件之间的通信方式。 组件关系 上面展示的图片可以引入所有 Vue 组件的关系形式： A 组件和 B 组件、B 组件和 C 组件、B 组件和...
Vue入门 - 组件通信
博客转至https://chengyanzhao.github.io，CSDN不再更新。
03-31 4656
1 父子组件通讯 先触发子组件的mounted钩子，再触发父组件的mounted钩子。 1.1 子组件向父组件传递数据 子组件中调用this.$emit([自定义事件:string],[传出数据])。 父组件使用v-on监听自定义事件，子组件触发this.$emit时会自动触发。 参考代码：//parent component <template> <div v-on:childready=
总结vue父子组件之间的通信
Johnny0991的专栏
11-15 2万+
一 环境搭建 步骤 1 打开git，运行npm  install --global vue-cli 这是安装vue的命令行         2 vue init webpack vue-demo 这是vue基于webpack的模块项目         3 cd vue-demo 进入vue-demo文件夹         4 npm intall 安装packjson.json中依赖的no
vue组件之间互相传值：兄弟组件通信
Amanda_wmy的博客
04-28 4万+
vue组件之间互相传值：兄弟组件通信 我们在项目中经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题，但在一些小型的项目中，我们就没有必要去引入vuex。有几种方法： 方法一：先子传父，再父传子 思路：子传父：首先我们在 a.vue 组件中 ，给按钮botton绑定一个handleClick事件，事件中我们通过 this.$emit(） 方法去触发一...
vue组件间通信六种方式
weixin_45035430的博客
03-03 994
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： image 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、childr
Vue.js 父子组件通信的十种方式
Joy_Yue的博客
11-06 2万+
转载微信上的一篇文章 1、prop 这个在我们日常开发当中用到的非常多。简单来说，我们可以通过 Prop 向子组件传递数据。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。 浏览器输出 2、$emit 官方说法是触发当前实例上的事件...
Vue3 组件之间通讯
最新发布
05-25
Vue3 中，组件之间的通讯可以使用以下几种方式： 1. Props 和 Emit 在父组件中通过向子组件传递属性（props），子组件可以接受到父组件的...以上是 Vue3 中组件之间通讯的三种方式，开发者可以根据实际情况选择使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值