vue中央事件总线解决第一次进去之后不能监听,出来在进去就能触发监听

  1. 首先新建一个bus.js文件

  2. import Vue from 'vue'
    export const bus = new Vue({
      data () {
        return {
          // 定义数据
          data: {}
        }
      },
      created () {
        // 绑定监听
        this.$on('updata', (value)=>{
          this.data = value.data
        })
      }
    })
    
  3. 在要使用的地方引入

  4. import {bus  } from "../../static/bus.js"

  5. 在$emit中

  6. bus.$emit('updata',{
    			data:{
    					msg:this.msg
    				}
    		})

在$on中使用computed去监听


<view>{{msg}}</view>
<text>{{msgData}}</text>
computed:{
			msg(){
				this.msgData = bus.data.msg
				return bus.data.msg
			}
		}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 中,我们可以使用事件总线来实现组件间的通信。事件总线是一个空的 Vue 实例,可以用来触发监听事件。 具体实现步骤如下: 1. 在项目的 main.js 文件中,定义一个事件总线,并将其挂载到 Vue 原型上: ```javascript import Vue from 'vue' // 定义事件总线 const bus = new Vue() // 将事件总线挂载到 Vue 原型上 Vue.prototype.$bus = bus ``` 2. 在需要使用事件总线的组件中,可以通过 this.$bus 来访问事件总线,并使用 $emit 方法来触发事件: ```javascript this.$bus.$emit('event-name', data) ``` 其中,'event-name' 是事件的名称,data 是要传递的数据。 3. 在需要接收事件的组件中,可以使用 $on 方法来监听事件: ```javascript this.$bus.$on('event-name', data => { // 处理接收到的数据 }) ``` 这里的 'event-name' 需要和触发事件时的事件名称保持一致,data 是触发事件时传递的数据。 需要注意的是,事件总线是一个全局的 Vue 实例,因此在使用时需要避免事件名称的冲突,建议使用唯一的事件名称。 在不进入组件之前使用事件总线,可以在组件渲染之前就触发事件,然后在组件进入后再接收事件。例如,在路由跳转之前触发事件: ```javascript // 在路由跳转之前触发事件 router.beforeEach((to, from, next) => { bus.$emit('before-route-change', to, from) next() }) // 在组件中接收事件 export default { mounted() { // 监听路由跳转前的事件 this.$bus.$on('before-route-change', (to, from) => { console.log('路由即将跳转到:', to.path) }) } } ``` 以上就是在 Vue 中使用事件总线的基本步骤,希望能帮助到您。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值