Vue中父子组件的几种通信方式

拼搏现实的明天。 2023-06-11 06:25 17阅读 0赞

### 背景： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70][]

### 实现方式： ###

如上图所示，A组件嵌套B组件，按照Vue的开发习惯，父子组件通信可以通过以下几种方式实现：

1、A to B 通过props 的方式向子组件传递。B to A 通过在 B组件中 的$emit ，A组件的@ 或者 $on 来实现，具体参见 [vue中props（父组件传递数据给子组件）的使用][vue_props]  和  [vue中子组件传递数据给父组件的几种方式][vue]

2、通过Vuex 状态管理，以实现父子组件之间的通信，详见 [通过Vuex共享状态实现父子组件之间的通信][Vuex]

3、通过Vue Event Bus ,也就是Vue 的实例来实现父子组件之间的通信，详见 [通过Vue 的实例来实现父子组件之间的通信][Vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzY2MjY5_size_16_color_FFFFFF_t_70]: /images/20230531/97bd6e9a66424df0b8aa1e71905035b1.png
[vue_props]: https://blog.csdn.net/qq_35366269/article/details/85318862
[vue]: https://blog.csdn.net/qq_35366269/article/details/84874010
[Vuex]: https://blog.csdn.net/qq_35366269/article/details/102800840
[Vue]: https://blog.csdn.net/qq_35366269/article/details/102817825

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中父子组件通信

聚沙成塔·每天进步一点点本文内容 ⭐ 专栏简介 Vue中父子组件通信 1. Props 父组件：子

小鱼儿/ 2024年02月05日 23:57/ 0 赞/ 30 阅读

相关 Vue.js 中的父子组件通信方式

Vue.js 中的父子组件通信方式在 Vue.js 中，组件是构建应用程序的基本单元。当我们在应用程序中使用组件时，组件之间的通信是非常重要的。在 Vue.js 中，父

心已赠人/ 2023年10月12日 13:46/ 0 赞/ 17 阅读

相关 Vue中父子组件的几种通信方式

背景： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

拼搏现实的明天。/ 2023年06月11日 06:25/ 0 赞/ 18 阅读

相关 vue父子组件通信

vue 父子组件通信 1.1 父传子 props（组件通信） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

我会带着你远行/ 2023年01月15日 03:57/ 0 赞/ 175 阅读

相关 React 中组件间通信的几种方式

[https://www.jianshu.com/p/fb915d9c99c4][https_www.jianshu.com_p_fb915d9c99c4] [https_

秒速五厘米/ 2022年12月17日 04:23/ 0 赞/ 227 阅读

相关 Vue 父子组件的通信

Vue 父子组件的通信 vue中页面又一个个组件组成,小组件组成大组件,那么很多时候,我们都需要让父子组件进行传值一、父组件传值给子组件准备工作

我就是我/ 2022年12月10日 14:51/ 0 赞/ 294 阅读

相关 VUE非父子组件之间通信的几种方式

一.使用广播的方式$emit(), $on() 1.创建js文件 import Vue from 'vue' export default n

绝地灬酷狼/ 2022年12月01日 14:20/ 0 赞/ 225 阅读

相关 Vue---父子组件通信+子父组件通信+非父子组件通信

父-子组件通信-props 父组件到子组件通信，通过props。子组件在props中定义要传的值，props有两种形式，一种是字符串数组形式，一种是对象形式。前者方

柔情只为你懂/ 2022年11月30日 04:13/ 0 赞/ 332 阅读

相关 vue实战-vue父子组件通信方式汇总

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

ゞ浴缸里的玫瑰/ 2022年02月22日 10:38/ 0 赞/ 234 阅读

相关 vue 父子组件通信

vue 父子组件通信，如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

快来打我*/ 2022年01月25日 19:19/ 0 赞/ 480 阅读