vue的事件总线，事件公交（实现组件的传值）

最新推荐文章于 2024-07-03 11:48:40 发布

新城大海

最新推荐文章于 2024-07-03 11:48:40 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/weixin_45664217/article/details/119841389

版权

本文通过一个实例展示了如何在Vue中利用事件总线（Event Bus）实现组件间的通信。在main.js中创建了全局的Vue实例挂载事件总线，并在StudentA组件中使用$emit触发事件，传递数据。而StudentB组件则通过$on监听并接收这些数据，实现了组件间的双向数据流动。这种方法在没有父子关系或非兄弟组件间的通信中尤为实用。

摘要由CSDN通过智能技术生成

这里用StudentA 组件和StudentB 组件的传值为例
StudentA组件传值给StudentB

首先需要在入口文件main.js需要在vue的原型上面挂载bus

Vue.prototype.bus = new Vue()

2.StudnetA 组件中的写法： this.$emit(‘hello’, 传的数据)触发需要传递到组件上面的hello事件

<template>
  <div class="studentA">
    <h1>A同学的姓名和年龄</h1>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <button @click="clickHandfler">给数据给他的兄弟</button>
      <button @click="clickHandfler1">给数据给他的兄弟的子组件</button>
  </div>
</template>
<script>
export default {
  name: 'StudentA',
  data () {
    return {
      name: 'zsA',
      age: 21,
      info: '这里还是A同学的信息',
      info1: '这里还是A同学的信息传给b组件的子组件的信息'
    }
  },
  methods: {
    clickHandfler () {
      this.bus.$emit('hello', this.info)
    },
    clickHandfler1 () {
      this.bus.$emit('hello1', this.info1)
    }
  }
}
</script>
<style scoped>
</style>

StudentB组件的写法：this.bus.$on(‘hello’, data => {
console.log(data) // data 表示得到的数据
})

<template>
  <div class="studentB">
    <h1>B同学的姓名和年龄</h1>
    <div>{{ name }}</div>
    <div>{{ age }}</div>
    <div v-if="infoB">{{infoB}}</div>
    <studentItem></studentItem>
  </div>
</template>
<script>
import studentItem from './StudentbiTEM'
export default {
  name: 'StudentB',
  data () {
    return {
      name: 'zs',
      age: 20,
      infoB: ''
    }
  },
  components: {
    studentItem
  },
  mounted() {
    this.bus.$on('hello',(data)=> {
      console.log(data)
      this.infoB = data
    })
  },
}
</script>
<style scoped>
</style>