记录在vue中的父传子，子传父，兄弟传值之间的通信问题

最新推荐文章于 2024-08-02 09:29:40 发布
原创 最新推荐文章于 2024-08-02 09:29:40 发布 · 257 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细介绍了Vue.js中组件间的通信方法，包括父组件向子组件传递数据、子组件向父组件发送信息，以及兄弟组件间通过事件总线或Vuex进行数据共享的技巧。

1.先看看父传子

App.vue是父组件， 被调用的HelloWorld.vue是子组件

父传子：调用子组件的时候直接赋值即可

在这里插入图片描述

被调用的HelloWorld.vue子组件通过props接收并赋值

在这里插入图片描述

这样就能看到效果，在App.vue上看到的效果

在这里插入图片描述

2.再来看子传父

子传父：子组件需要通过this.$emit('事件名称'，'需要传的值') 向父组件发射广播信息

在这里插入图片描述
在这里插入图片描述

通过点击按钮可以看到收到了子组件传来的值

在这里插入图片描述

3.最后看看兄弟传值（子传子）

有三种方式

  1. 大儿子传值到父组件，再通过父组件传值给小儿子
  2. 通过事件总线eventBus进行通信
  3. 通过vuex进行数据共享

这里仅讲通过事件总线eventBus进行通信

  1. 先在components下创建一个子组件About.vue
    在这里插入图片描述
  2. 在App.vue里引入About.vue组件并注册调用
    在这里插入图片描述
  3. 因为需要用到事件总线，所以需要在src/eventBus下创建一个eventBus.js
    在这里插入图片描述
  4. 在需要用到传值的组件里引入eventBus
     import eventBus from "@/eventBus/eventBus"
  5. 我们在HelloWorld.vue组件里面广播出一个信息
    在这里插入图片描述
    6.在About.vue组件中，通过事件总线eventBus监听HelloWorld.vue发出的信息
    在这里插入图片描述
    7.通过页面来看看效果
    未点击状态下：
    还没有点击HelloWorld.vue组件中的按钮
    点击之后的状态：在这里插入图片描述

这就完成了组件与组件之间的通信！

Vue面试题目-组件通信，父组件向子组件传值，子组件向父组件传值，兄弟组件之间数据传递，组件插槽应用
VAN
10-15 576
前端学习
Vue.js 组件通信：7种方式全面解析
最新发布
AI架构全栈开发实战笔记
06-17 888
在Vue.js开发中，组件化是核心思想之一。随着应用规模的增长，组件之间的通信变得尤为重要。本文旨在系统性地介绍Vue.js中7种主要的组件通信方式，帮助开发者根据不同的场景选择合适的通信方案。我们将从最简单的父子组件通信开始，逐步深入到更复杂的通信方式。每种方式都会配以实际代码示例和适用场景分析。Props：父组件向子组件传递数据的机制自定义事件：子组件向父组件发送消息的方式Event Bus：跨组件通信的中央事件系统Vuex：Vue的官方状态管理库：祖先组件向后代组件注入依赖的机制。
Vue组件通信(父传子、子传父、兄弟通信)
亚洲的博客
01-08 2232
一、父传子 首先在父组件的子组件上定义一个属性，在属性上挂载要传输的变量，然后在子组件中通过prop来接收 1、父组件parent.vue <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </templa
Vue子传父详细教程
m0_62956518的博客
05-05 3万+
子传父通过自定义事件，this.$emit（"自定义方法名1"，需要传的值）进行传值。 本文父组件：shopping.vue 子组件：shoplist.vue 1.第一步，在父组件中引入子组件（父组件内） import shoplist from '../shoplist.vue' 2.在子组件内定义数据（子组件内） data() { return { children:"this is children" };......
Vue 64 ，Vue中的子传父、父传子使用详细（Vue2子传父、父传子，Vue3子传父、父传子，组件懒加载，Vue组件传值）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
03-25 1万+
⭐在Vue.js中，父子组件间的数据传递是构建动态应用的关键。对于“子传父”，我们通过在父组件中为子组件绑定自定义事件，并在子组件内使用this.$emit('事件名', 数据)来触发该事件，从而将数据从子组件传递到父组件。而“父传子”则是通过属性（props）实现的，父组件向子组件传递数据作为属性值，子组件通过声明props接收这些数据。这两种方式确保了组件间通信的高效与解耦，是开发复杂Vue应用的基础。
vue 父传子 子传父实现方式
weixin_64735754的博客
03-08 1万+
父传子： 主要步骤： 首先在子组件props中创建一个属性，用以接收父组件传过来的值； 然后父组件中引用子组件，并在子组件标签中添加子组件props中创建的属性； 最后把需要传给子组件的值赋给该属性。 理解： 父亲传给儿子东西，儿子在那边用一个碗接，这个碗就是props，因为传的东西不可能只是一个，所以是一个数组，父亲因为要传东西到儿子的碗里，所以要绑定儿子的碗，然后传值 props：properties的简称 prop 只可以从上一级组件传递到下一级组件（父子组件），...
vue子组件向父组件传值的三种方式
热门推荐
bidepanm的博客
04-27 4万+
一、通过父组件给子组件传递函数类型的props实现 父组件： <Child :getChildInfo="getChildInfo"></Child> 子组件： <button @click="sendChildInfo"></button> props: ['getChildInfo'] sendChildInfo() { this.getChildInfo(数据); } 二、通过父组件给子组件绑定自定义事件实现 第一种方式： 父组件： <c
vue3 父向子组件、子向父组件和兄弟组件之间通信的购物车案例
m0_52411807的博客
07-18 369
main.js App.vue Count.vue Footer.vue Goods.vue Header.vue eventBus.js compute.js 五、项目地址 demo-cart
vue3父子组件间传参通信
XMCYD的博客
06-14 1万+
本文主要是记录Vue3在setup语法糖下的父子组件间通信的四种方式。
Vue组件传值存在的弊端-Vuex状态管理
m0_57887428的博客
07-10 644
vue组件传值在应用中存在的不足之处，vuex提出的应用背景
VUE父子之间的传值（以vue3为例）
m0_60817005的博客
08-02 1万+
【代码】VUE父子之间的传值（以vue3为例）
vue--子传父、父传子
weixin_66375317的博客
05-08 5015
vue --子传父 、父传子
vue子传父
qq_42788117的博客
12-03 147
1.子组件 <template> <div class="testCom"> <input type="text" v-model="message" /> <button @click="click">发送消息给爸爸</button> </div> </template> <script> export default { data() {
vue 父传子，子传父组件的多种方式；父组件直接调用子组件方法；子组件直接调用父组件方法
q1ngqingsky的博客
11-08 5839
//父组件： <user-view ref="view" :dialog-visible="userViewVisible" @close="viewClose" /> methods:{ view(row) { this.$refs.view.setUser(row); this.userViewVisible = true; }, } // 子组件：user-view methods:{ setUse.
vue组件的五种传值方法(父子\兄弟\跨组件)
pckzzy107的博客
08-22 1512
子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。// 父组件代码，渲染子组件method:{// 子组件代码。
vue组件通信---父子互传（props，$emit()）
muzidigbig的博客
11-20 4715
一、大纲 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。 第一步：父传子（props） 第二步：子传父（$emit()） 二、案例 1----props 2----$emit() parent.vue <te...
vue组件之间传值—基础方法
weixin_49173037的博客
04-03 471
前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递 父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的三种方式 1、父传子 子组件的代码： <template> <div id="container"> {{msg}} </div&gt...
Vue 中 组件通信 - 子传父（自定义事件）
qq_45803050的博客
07-19 1万+
Vue 中 组件通信 - 子传父（自定义事件） 子传父步骤： 在子组件的 data 里面定义好 要传递的数据 在子组件的模版里面正常使用 该数据 （一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例） 在子组件的 methods 里面 定义 this.$emit(‘itemclick’,item)， 将 名字为 itemclick 的自定义事件传给父组件，item 是参数 在父组件使用子组件的时候，利用 v-on ，将接收到的数据传递给自己的事件 @
vue组件通信：父传子—子传父
m0_57307028的博客
10-05 5070
我们都知道组件是vue里很重要的一个知识点，这里我看的是b站上的coderwhy老师的视频 下面我就来写分享以下我的课程总结 父传子 1.首先想要实现组件的父子通信，那么我们第一步要先创建一个子组件，与父组件绑定，那么先看以下原代码 ...
Vue中父组件向子组件传递数据的方法
- **不应该在子组件内修改prop的值**：直接在子组件中修改prop的值会破坏数据的单向流，并可能导致不可预见的问题。如果需要改变传递的数据，应当通过计算属性或方法来处理。 ### 结语 在Vue.js中，父组件向子组件...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值