vue中$bus的使用和涉及到的问题

Hello大家周末好,最近项目比较忙所以没有及时的更新抱歉,今天给大家讲一vue.bus。使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到(每一个领域都是会有坑的呀)。

1:创建$bus文件

   创建一个文件内容如下:import Vue from 'vue'
                        export default new Vue();

2:引入$bus

     main.js: import Bus from './views/bus/bus';  
              Vue.prototype.$bus = Bus;  //注意这里的Vue是我上面引入的vue   import Vue from 'vue'

3:使用传值

 this.$bus.$emit("vaPage",value); //很像父子之间传值的方法

4:接收

    this.$bus.$on("vaPage", v =>{   //vaPage传的时候的key是什么接收就必须是什么
        console.log(v);   //v是传来的值,可以接收多个参数
    })

5:填坑之路

   大家假设一下一个场景现在有3个组件分别是A(父组件),B(子组件),C(子组件)
	       这时候B,C之间的通信就可以用$bus了,比如我在B中进行了操作然后要刷新自己和C组件的dom咱们就可以通过this.$bus.$emit(key,value);  然后C接受this.$bus.$on("key",v=>{});可以在这个组件调用方法什么的你在这里调用方法的时候会发现我只写了一次调用初始化的函数为啥会调用多少而且不刷新页面的时候越来越多,这是需要使用到咱们的生命周期函数beforDestroy在当前组件销毁的时候注销这个$bus的方法:beforDestroy(){this.$bus.$off("val")//关闭$Bus}.

6:总结

 使用$bus的时候在接受bus的组件中别忘了再beforDestroy函数中销毁bus,不销毁的话会一直叠加的调用这个方法:
  beforDestroy(){
         this.$bus.$off("vaPage");  //当这个组件销毁的时候bus也跟着一起销毁
     }
<think>好的,我现在要处理用户关于Vue.js中使用$emit进行父子组件通信的问题。首先,我需要回忆一下Vue中组件通信的基本知识。根据用户提供的引用内容,父组件向子组件传值通常用props,而子组件向父组件通信则使用$emit方法。 接下来,我需要确保理解$emit的工作原理。根据引用[1],子组件通过this.$emit触发一个自定义事件,父组件则通过v-on监听这个事件。这样数据就能从子组件传递到父组件了。比如,子组件可能在某个按钮点击时触发事件,并传递数据,父组件捕获这个事件并处理数据。 用户可能需要一个具体的示例来理解这个过程。我需要构造一个简单的例子,比如一个按钮在子组件中,点击时通知父组件并传递数据。同时,要展示父组件如何监听这个事件并更新状态。 还要注意语法细节,比如在子组件中正确使用this.$emit('event-name', data),父组件中用@event-name="handler"来监听。另外,可能需要提到事件名的推荐写法,比如使用kebab-case,因为HTML属性不区分大小写。 另外,用户提供的引用[2]提到了事件总线(bus),但用户的问题是关于父子组件通信,所以可能不需要深入讨论事件总线,但可以稍微提及作为扩展知识,不过要明确区分使用场景。 需要检查是否有其他相关注意事项,比如在子组件中不要直接修改props,应该通过事件让父组件修改数据。例如,如果子组件需要修改父组件传来的某个prop,应该触发事件让父组件处理这个修改,比如使用.sync修饰符或者v-model,但用户的问题可能更基础,暂时不需要涉及这些高级用法。 然后,考虑用户可能的后续问题,比如如何传递多个参数,或者如何在父组件中使用事件参数。在示例中,可以展示传递单个参数,也可以提到多个参数的情况。 最后,确保回答结构清晰,分步骤说明,并包含代码示例。同时,根据用户要求,生成相关问题,这些问题应该围绕父子组件通信的扩展,比如其他通信方式、事件总线的使用等。</think>### Vue.js中使用$emit实现父子组件通信 #### 一、核心机制说明 在Vue中,`$emit`是实现**子组件向父组件传值**的核心方法。子组件通过触发自定义事件,父组件通过`v-on`指令监听该事件并处理数据流[^1]。 #### 二、具体实现步骤 1. **子组件触发事件** ```javascript // ChildComponent.vue <template> <button @click="sendMessage">发送消息</button> </template> <script> export default { methods: { sendMessage() { this.$emit('message-from-child', '子组件数据') } } } </script> ``` 2. **父组件监听事件** ```javascript // ParentComponent.vue <template> <child-component @message-from-child="handleMessage"/> <p>接收数据:{{ receivedData }}</p> </template> <script> export default { data() { return { receivedData: '' } }, methods: { handleData(payload) { this.receivedData = payload } } } </script> ``` #### 三、多参数传递示例 ```javascript // 子组件触发 this.$emit('form-submit', formData, timestamp) // 父组件接收 <child-form @form-submit="(data, time) => handleSubmit(data, time)"/> ``` #### 四、注意事项 1. 事件命名推荐使用**kebab-case**格式(如`user-selected`) 2. 可通过`.sync`修饰符实现双向绑定(Vue 2.x特性) 3. 深层组件建议使用Vuex状态管理
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值