vue学习日记21:非父子通信（拓展）-event bus 事件总线

最新推荐文章于 2024-06-10 00:35:53 发布

yinfanfff

最新推荐文章于 2024-06-10 00:35:53 发布

阅读量258

点赞数 1

分类专栏： vue入门学习文章标签：学习 vue.js vue 前端

本文链接：https://blog.csdn.net/yinfanfff/article/details/137824023

版权

vue入门学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、概念

是一对多的关系

二、代码

BaseA

<template>
  <div class="base-a">
    我是A组件（接受方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  created() {
    //2. 在A组件(接收方)，进行监听Bus的时间（订阅消息）
    Bus.$on('sendMsg', (msg) => {
      // console.log(msg)
      this.msg = msg
    })
  },
  data() {
    return {
      msg: '',
    }
  },
}
</script>

<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

BaseB

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="clickSend">发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  methods: {
    clickSend() {
      // 3. B组件（发送方） 触发时间的方式传递参数（发布消息）
      Bus.$emit('sendMsg', '今天天气不错，适合旅游')
    },
  },
}
</script>

<style scoped>
.base-b {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

BaseC

<template>
  <div class="base-c">
    我是C组件（接受方）
    <p>{{msg}}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {

  created() {
    Bus.$on('sendMsg', (msg) => {
      // console.log(msg)
      this.msg = msg
    })
  },
  data() {
    return {
      msg: '',
    }
  },
}
</script>

<style scoped>
.base-c {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

utils/EventBus


// 1.创建一个都能访问到的时间总线（空的 vue 实例）
import Vue from 'vue'

const Bus  =  new Vue()

export default Bus

App

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB>
    <BaseC></BaseC>
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
import BaseC from './components/BaseC.vue'
export default {
  components:{
    BaseA,
    BaseB,
    BaseC
  }
}
</script>

<style>

</style>

展示