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

最新推荐文章于 2022-08-20 16:11:16 发布
最新推荐文章于 2022-08-20 16:11:16 发布
阅读量357 收藏
点赞数 1
分类专栏： Vue 文章标签： vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenshaolin02/article/details/108852995
版权

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

在这里插入图片描述

在这里插入图片描述

Let's go?
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue常用传值方式、父传子、子传父及非父子实例分析
10-15
本文将详细讲解Vue中的四种主要传值方式：父传子、子传父、兄弟组件间的通信以及非父子组件间的通信。 1. **父传子（Props）** - **概念**：父组件向子组件传递数据是通过`props`属性实现的，它允许父组件的数据向...
Vue三种常用传值示例(父传子、子传父、非父子)
10-18
本文将详细介绍三种常见的Vue组件传值方式：父组件向子组件传值、子组件向父组件传值以及非父子组件之间的传值。 1. **父组件向子组件传值** 在Vue中，父组件向子组件传递数据通常通过`props`属性实现。首先，在父...
vue传值
weixin_45690699的博客
10-28 143
父组件给子组件传值 父组件 <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :in...
vue项目中的父传子---子传父---bus总线---props类型
MISS_zhang_0110的博客
06-18 217
vue项目中的父传子和子传父一、父传子父组件子组件二、子传父子组件父组件三、bus总线在src下创建一个bus.jsC组件B组件props类型 一、父传子 父组件通过自定义属性向子组件传值 子组件通过props接受传递过来的值 父组件 <Child :msg-data='msg' :str='str'></Child> //自定义属性名不能有大写 子组件 props：['numDate','str'] 二、子传父 子组件先触发事件处理程序 在事件处理程序中通过自定义事件发
子传父$emit+非父子组建通信--bus总线
Oldman20的博客
12-15 1199
点击箭头后，头部header组件要更改isCollapse值，并且传给侧边菜单栏aside组件，从而更改侧边栏宽度和样式
使用bus实现父子兄弟间传值
weixin_45170083的博客
03-30 403
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 2030
1、父组件传值给子组件------->使用props属性接收 2、子组件传值给父组件-------->子组件通过$emit传递，父组件通过@属性名称接收 3、父组件，子组件，兄弟组件相互传值------>需要bus中央总线，相当于一个中介 1、父组件传值给子组件------->使用props属性接收 <!DOCTYPE html> <h...
vue 组件间的通信之子组件向父组件传值的方式
10-15
3. **中央事件总线（Event Bus）**：当组件之间没有直接的父子关系时，可以创建一个全局的Vue实例作为事件中心，通过`$on`订阅事件，`$emit`发布事件来传递数据。这通常是一个简化的Vuex解决方案，适用于简单的应用...
Vue组件传值之bus总线
01-08
在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，...
retrofit的模拟学习和Eventbus的传递一个bean对象和Intent传递一个bean对象
kunkun5love的博客
01-31 774
一直想好好学习使用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 244
*## 1、父传子：使用props 使用规则：组件内部通过props接收传过来的值，props传递数据原则：单向数据流（只允许父组件向子组件传递数据，不允许子组件直接操作props中的数据） <!--父组件内容--> <div id="app"> <div>{{pmsg}}</div> <!--父组件通过属性绑定将值传递给子组件--> <menu-con :me-con="hhh"></menu-con&g
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3969
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue事件总线（EventBus）、$on、$emit、$off
^_^
06-29 3万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
vue 子组件传值给父组件（常用的两种）
weixin_56459277的博客
04-20 3031
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..
Vue 传值方式——EventBus
weixin_54160772的博客
08-20 692
bus.$on('sendValue',(val) => { // 通过 bus.$on() 方法 接受 传递 过来数据 并进行赋值。 // 点击按钮 把Send 组件的数据 发送 appect 组件数据。import bus from '@/componets/eventBus.js' // 引入 bus 实例。import bus from ‘@/componets/eventBus.js’ // 导入 bus 实例。
vue 子组件向父组件传递数据（自定义事件）
weixin_45307792的博客
12-06 1486
vue使用props可以让父组件向子组件传递数据，那怎么让子组件向父组件传递数据呢？这里就要用到（自定义事件）。 我们在子组件中使用$emit向父组件发射一个自定义事件和数据，通过这个自定义事件我们可以通过父组件的方法获取发送过来的数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <sc...
Vue组件通信(父传子、子传父、兄弟通信)
田兴的博客
12-20 1万+
一.父组件传到子组件 1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son psMsg="我是你爸爸"></son> <!-- 子组件绑定psMsg变量--> </d...
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
热门推荐
华世中国的博客
01-09 34万+
Vue2.0 传值方式：在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。先给大家介绍Vue常见的三种传值方式
vue3事件总线bus传值
最新发布
09-06
在Vue 3中，官方取消了全局事件总线的使用，这给组件之间传值带来了一些麻烦。 为了解决这个问题，我们可以使用一个插件叫做mitt。首先，你需要安装并使用mitt插件。然后，在接收传值的组件中，你需要引入bus并监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值