Vue 子组件与子组件传递值

本文介绍Vue中的$bus事件总线概念及其实现方式,通过实例讲解如何在无父子关系的组件间进行通信。具体包括$bus的创建、事件的触发与监听,以及传值和接收值时的注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要用到啦  vue中的$bus使用 

$bus是什么?
关于$bus 我们把它叫做事件总线,它Vuex很像,但是它不是用来管理状态的,是管理事件总线的。主要是解决无关系组件之间的交互问题。

组件中使用
可以通过this.$bus.$emit(‘aaa’)发送事件函数
可以通过this.$bus.$on(‘aaa’)接受事件函数
在一个组件中发送
 

可以在js文件夹里,写个js文件

import Vue from 'Vue'

export default new Vue

 

在传值和接收值的页面引用:

import bus from '@/store/eventBus'

传值子页面:

 接收值子页面:

注意的地方: 

changeSensorName 传值与接值第一个参数名要一直,第二个是参数值

Vue中,有多种方式可以让子组件修改父组件传递。 一种方式是通过在子组件中使用`$emit`方法,触发一个自定义事件,并且将修改后的作为参数传递给父组件。比如,在子组件中定义一个`change`方法,然后通过`this.$emit('update:value', newValue)`来触发名为`update:value`的事件,将新的`newValue`传递给父组件。这样父组件就可以通过监听`update:value`事件来获取子组件修改后的。 另一种方式是使用`.sync`修饰符。在父组件中通过`v-bind`指令将父组件绑定到子组件的属性中,并且使用`.sync`修饰符将子组件对该属性的修改同步到父组件。比如,在父组件中将`value`属性传递子组件时,我们可以使用`<child-component :value.sync="value"></child-component>`来实现双向绑定。这样子组件就可以直接修改`value`属性,并且父组件会同步更新。 还有一种方式是使用`v-model`指令。在父组件中通过`v-model`指令将父组件绑定到子组件的属性中,并且在子组件中使用`$emit`方法触发名为`input`的事件来更新该属性。比如,在父组件中使用`<child-component v-model="value"></child-component>`来实现双向绑定。这样子组件修改`value`属性时,会自动触发`input`事件,从而更新父组件。 综上所述,Vue子组件可以通过使用`$emit`方法、`.sync`修饰符或`v-model`指令来修改父组件传递。这些方式都可以实现子组件和父组件之间的双向数据绑定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值