EventBus兄弟组件传参

晓殇散人

于 2023-02-14 20:42:36 发布

阅读量76

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_68175394/article/details/129033247

版权

初始化

新建js文件创建一个EventBus的实例化对象

import Vue from 'vue'
export const EventBus = new Vue()

或者直接在Vue()的原型中,直接引入EventBus (不推荐)

发送事件

用EventBus.$emit(‘为这次传值事件起个名字’,要传输的数据)方法发送事件

<template>
   <div>
      <button @click="giveIt">传参</button>
   </div>
</template>

<script>
import {EventBus} from "@/api/EventBus";
export default {
   name: "BigView",
   methods: {
      giveIt() {
         EventBus.$emit('bigMsg','大伙计的数据')
      }
   }
}
</script>

接受事件

用EventBus.$on(‘对应的事件名字’,回调函数(其参数为传过来的值))方法接受事件

<template>
   <div>
      {{ msg }}
   </div>
</template>

<script>
import {EventBus} from "@/api/EventBus";
export default {
   name: "SmallView",
   data() {
      return {
         msg: '',
      }
   },
   mounted() {
      EventBus.$on('bigMsg', (res)=> {
         this.msg = res
      })
   }
}
</script>