vue子组件之间传值

本文深入探讨了Vue.js中实例间的通信机制,详细解释了如何通过new Vue()创建事件总线,实现组件间的数据传递与事件监听。文章涵盖了Event.$emit()用于发送数据,Event.$on()用于接收数据的方法,并提供了子组件向父组件传值的具体示例。

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

 

 var Event = new Vue();      相当于又new了一个vue实例,Event中含有vue的全部方法;

  Event.$emit('msg',this.msg);      发送数据,第一个参数是发送数据的名称,接收时还用这个名字接收,第二个参数是这个数据现在的位置;

  Event.$on('msg',function(msg){  接收数据,第一个参数是数据的名字,与发送时的名字对应,第二个参数是一个方法,要对数据的操作

    /这里是对数据的操作

  })

或者新建一个空的js文件

import Vue from 'vue'
export default new Vue()

 

import vmson from '@/services/emptyVue'
export default {
  name: 'RegionA',
  props: [],
  data () {
    return {
      PoiNames: ['旅游景点', '餐饮', '学校', '休闲娱乐', '医疗', '超市', '便利店', '写字楼', '小区', '酒店', '银行', '运动健身'],
      PoiList: []
    }
  },
  methods: {
  },
  mounted () {
    vmson.$on('poiList', (val) => { // 监听事件poiList回调函数要使用箭头函数 接收文件
      console.log('ccc', val) // 
    })
  }
}
</script>

另一个子组件使用

vmson.$emit('poiList', results) 去传值

$on()会多次触发出现了bug

解决方法

beforeDestroy () { vmson.$off('poiList') },

<think>好的,用户想了解在Vue中如何实现兄弟组件之间方法。我需要先回忆一下Vue3中兄弟组件通信的几种方式。根据之前提供的引用,主要有两种方法:使用Mitt插件或者利用provide和inject的响应式API。另外,还有通过事件总线(Bus)的方式,不过这在Vue3中可能需要自己实现,或者使用第三方库如Mitt。 首先,用户可能已经了解过Vue2中的事件总线,但在Vue3中,官方移除了$on等方法,所以需要替代方案。Mitt是一个轻量的事件总线库,适用于Vue3。步骤包括安装Mitt,创建事件总线实例,然后在兄弟组件中分别使用emit和on来触发和监听事件。需要确保两个组件引用的是同一个事件总线实例,通常会在全局注册。 另一种方法是使用provide和inject配合响应式数据。父组件提供一个响应式的对象,兄弟组件通过inject获取这个对象,并修改其中的数据。这样,当数据变化时,所有注入该数据的组件都会更新。需要注意的是,Vue3的provide/inject默认不是响应式的,所以必须使用ref或reactive来包装数据。 用户可能关心哪种方法更推荐。Mitt适合事件驱动的通信,而provide/inject适合共享状态。如果项目已经使用Pinia或Vuex,可能更推荐状态管理库来处理兄弟组件通信,但用户的问题没有提到这些,所以暂时不引入。 另外,引用中的示例代码显示在子组件中使用$emit,但Vue3中兄弟组件不能直接通过父组件递事件,需要父组件作为中介,或者使用事件总线。所以需要区分子组件和兄弟组件的场景。 需要确保回答结构清晰,分点说明每种方法,并给出示例代码。同时,根据用户提供的引用,正确引用来源,比如Mitt方法引用[^1],事件总线引用[^3],而引用[^2]中的例子可能不适用于兄弟组件,因为$emit需要父组件监听,所以可能需要指出那种方式适用于父子而非兄弟,避免混淆。 最后,生成相关问题,比如性能比较、其他方法如Vuex,或者具体使用场景,帮助用户深入理解。</think>在 Vue3 中实现兄弟组件通信的常用方法主要有以下两种方式,均支持响应式数据递: --- ### 一、使用 Mitt 事件总线(推荐) 1. **安装 Mitt 插件** ```bash npm install mitt ``` 2. **创建全局事件总线** ```javascript // src/utils/bus.js import mitt from 'mitt' export default mitt() ``` 3. **组件 A 发送事件** ```vue <script setup> import bus from '@/utils/bus' const sendData = () => { bus.emit('customEvent', { value: '数据内容' }) } </script> ``` 4. **组件 B 接收事件** ```vue <script setup> import bus from '@/utils/bus' import { onMounted } from 'vue' onMounted(() => { bus.on('customEvent', (data) => { console.log('接收数据:', data.value) // 输出:数据内容 }) }) </script> ``` **特点**:解耦组件关系,适合跨层级通信[^1][^3] --- ### 二、使用 provide/inject + 响应式状态 1. **父组件提供共享状态** ```vue <script setup> import { provide, reactive } from 'vue' const sharedState = reactive({ message: '' }) provide('sharedKey', sharedState) </script> <template> <ComponentA /> <ComponentB /> </template> ``` 2. **兄弟组件修改状态** ```vue <!-- ComponentA --> <script setup> import { inject } from 'vue' const state = inject('sharedKey') state.message = '来自A的数据' </script> ``` 3. **兄弟组件读取状态** ```vue <!-- ComponentB --> <script setup> import { inject } from 'vue' const state = inject('sharedKey') console.log(state.message) // 输出:来自A的数据 </script> ``` **特点**:适合需要持久化共享的状态[^1] --- ### 性能对比 | 方法 | 适用场景 | 数据流向 | |-----------|----------------------|------------| | Mitt | 瞬时事件通信(表单提交/通知) | 单向/双向 | | provide | 需要长期维护的共享状态(主题/配置) | 集中式状态管理 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值