Vue 传值 父传子 子传父 Bus 总线传值

父子组件通信与数据流转：Vue实战与解决方案
最新推荐文章于 2022-08-20 16:11:16 发布
原创 最新推荐文章于 2022-08-20 16:11:16 发布 · 425 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js #html

本文详细介绍了Vue中父组件向子组件传递数据的方法，包括$emit和eventBus的使用，并探讨了子组件间间接通信的策略。同时，提到了在不同场景下选择eventBus或Vuex的建议。

父传子
在这里插入图片描述
在这里插入图片描述
2.子组件向父组件传递数据
子组件通过$emit方法（用来触发事件,详情见官网）传递参数：
子组件：
在这里插入图片描述
父组件在这里插入图片描述
3.子组件向子组件传递数据
Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。
或者通过eventBus或vuex（小项目少页面用eventBus，大项目多页面使用 vuex）传值：
3.1通过eventBus(即通过on监听、emit触发的方式)
新建一个bus.js
bus.js （实例化一个Vue对象）

在这里插入图片描述

在这里插入图片描述

vue2 父传子、子传父、兄弟通信
好好学习，天天向上！
02-09 752
一.父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告） 1. 父组件parent.vue代码如下： 父传子 在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren
Vue事件总线（EventBus）、$on、$emit、$off
^_^
06-29 4万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
vue传值
weixin_45690699的博客
10-28 199
父组件给子组件传值 父组件 <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :in...
vue项目中的父传子---子传父---bus总线---props类型
MISS_zhang_0110的博客
06-18 297
vue项目中的父传子和子传父一、父传子父组件子组件二、子传父子组件父组件三、bus总线在src下创建一个bus.jsC组件B组件props类型 一、父传子 父组件通过自定义属性向子组件传值 子组件通过props接受传递过来的值 父组件 <Child :msg-data='msg' :str='str'></Child> //自定义属性名不能有大写 子组件 props：['numDate','str'] 二、子传父 子组件先触发事件处理程序 在事件处理程序中通过自定义事件发
子传父$emit+非父子组建通信--bus总线
Oldman20的博客
12-15 1258
点击箭头后，头部header组件要更改isCollapse值，并且传给侧边菜单栏aside组件，从而更改侧边栏宽度和样式
使用bus实现父子兄弟间传值
weixin_45170083的博客
03-30 482
bus传值 1.首先你要在项目目录下或者src建一个bus.js文件 //Bus.js import Vue from "vue"; const Bus = new Vue(); export default Bus; 2.你可以在main.js中引入并挂载全局，或者之间在单个组件（需要传值组件）引用， import Bus from './Bus' Vue.prototype.Bus =...
1.Vue父子组件之间通信(数据传递)问题
扛麻袋的少年的博客
03-28 2165
1、父组件传值给子组件------->使用props属性接收 2、子组件传值给父组件-------->子组件通过$emit传递，父组件通过@属性名称接收 3、父组件，子组件，兄弟组件相互传值------>需要bus中央总线，相当于一个中介 1、父组件传值给子组件------->使用props属性接收 <!DOCTYPE html> <h...
Vue常用传值方式、父传子、子传父及非父子实例分析
10-15
本文将详细讲解Vue中的四种主要传值方式：父传子、子传父、兄弟组件间的通信以及非父子组件间的通信。 1. **父传子（Props）** - **概念**：父组件向子组件传递数据是通过`props`属性实现的，它允许父组件的数据向...
Vue三种常用传值示例(父传子、子传父、非父子)
10-18
本文将详细介绍三种常见的Vue组件传值方式：父组件向子组件传值、子组件向父组件传值以及非父子组件之间的传值。 1. **父组件向子组件传值** 在Vue中，父组件向子组件传递数据通常通过`props`属性实现。首先，在父...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
一、父传子（props） 在Vue中，子组件通过props接收来自父组件的数据。这是单向数据流，确保了子组件只能从父组件那里接收数据，而不能修改父组件的状态。父组件通过绑定一个属性到子组件上，并在子组件内声明这个...
vue 组件间的通信之子组件向父组件传值的方式
11-20
本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。 首先，我们要理解 Vue 中的组件通信基本规则。父组件通常通过属性（props）向下传递数据给子组件，而子组件向父组件传递数据则通常通过...
retrofit的模拟学习和Eventbus的传递一个bean对象和Intent传递一个bean对象
kunkun5love的博客
01-31 841
一直想好好学习使用retrofit今天就学习总结 首先是github的地址连接: https://github.com/square/retrofit 之后是依赖: compile 'com.squareup.retrofit2:retrofit:2.3.0' 注意: Retrofit requires at minimum Java 7 or Android 2.3. 关于
vue组件间(父传子，子传父，兄弟组件)通信方式
qq_42357338的博客
10-29 296
*## 1、父传子：使用props 使用规则：组件内部通过props接收传过来的值，props传递数据原则：单向数据流（只允许父组件向子组件传递数据，不允许子组件直接操作props中的数据） <!--父组件内容--> <div id="app"> <div>{{pmsg}}</div> <!--父组件通过属性绑定将值传递给子组件--> <menu-con :me-con="hhh"></menu-con&g
Vue 传值方式——EventBus
weixin_54160772的博客
08-20 791
bus.$on('sendValue',(val) => { // 通过 bus.$on() 方法 接受 传递 过来数据 并进行赋值。 // 点击按钮 把Send 组件的数据 发送 appect 组件数据。import bus from '@/componets/eventBus.js' // 引入 bus 实例。import bus from ‘@/componets/eventBus.js’ // 导入 bus 实例。
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4371
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
vue 子组件传值给父组件（常用的两种）
weixin_56459277的博客
04-20 3116
1.用于子组件触发事件传递给父组件 子组件： rowEvent 里面也可以带参数 事件 treeData 是携带的参数 rowEvent(){ this.$emit('rowEvent','treeData'’); }, 父组件: 在父组件绑定自定义事件 直接可以获取到 rowEvents(obj){ console.log（obj） }, 2.用ref（常用于不触发的事件） 子组件 定义个...
VUE 子组件向父组件传值的方法
热门推荐
小布丁儿的博客
02-21 5万+
一、子组件向父组件传递一个值 子组件： 父组件： 在使用子组件时，绑定change函数的事件处理函数也可以写成如下格式： 绑定事件处理函数时，可以不带括号，形参则默认为事件对象，如果绑定时带上了括号，再想使用事件对象则需要传入$event作为实参。 二、子组件向父组件传递一个值，并携带额外参数 record为额外参数( 本文的额外参数都拿record做举例 )。 子组件： 父组件： 绑定事件处理函数时，record和$event的顺序不做要求，但是按照vue..
子组件向父组件传参的几种方法
随笔记录，有些许菜，莫怪莫怪
07-19 1万+
子组件向父组件传参的几种方法
Vue组件通信(父传子、子传父、兄弟通信)
田兴的博客
12-20 1万+
一.父组件传到子组件 1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son psMsg="我是你爸爸"></son> <!-- 子组件绑定psMsg变量--> </d...
子组件传值父组件怎么传
最新发布
09-26
根据引用[2]，在Vue3中，子组件向父组件传值主要使用自定义事件（emit）。引用中展示了两种方式：使用setup语法糖和不使用setup语法糖。这里我们重点讲解使用setup语法糖的方式，因为这是Vue3的推荐写法。 ### 步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值