vue兄弟组件间的通信(事件总线)

最新推荐文章于 2024-07-02 17:50:31 发布

小严学Java

最新推荐文章于 2024-07-02 17:50:31 发布

阅读量2.3k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_52339077/article/details/125475498

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何利用ES6模块机制和Vue实例创建中央仓库，实现Vue组件间的通信，特别是在处理兄弟组件间通信的情景下。通过在store.js中创建一个Vue实例作为中央仓库，父组件引入子组件，而子组件通过监听和触发中央仓库的事件来传递和接收信息，实现了数据的实时同步。

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

借助中间文件，充当中央仓库
还好 ES6 的模块机制天然就支持建立一个中央仓库, 当 A 文件使用 import value from './b.js' 来引用 B 文件里面的 value 的时候, 这时就会赋值给 A 文件一个 B 文件的 value 的只读引用, 当 B 文件里面的 value 的值发生变化的时候, A 文件里面的 value 也会跟着改变。

解决 vue 兄弟组件之间的通信我们同样也可以使用中央仓库的方式来实现。

// store.js 作为中央仓库

import Vue from 'vue'
export default new Vue() //通过 new 一个 vue 的实例当作兄弟组件交互的中央仓库。

父级组件

<template>
  <first/>
  <second/> 
</template>

<script>
import First from './first'
import Scond from './second'
export default {
    components: {First, Second}
}
</script>

父组件只是引入子组件， 不再作为中央仓库来过渡交互。

子组件1

<template>
    <div @click='hanleClick'>子组件1</div>
</template>

<script>
import Store from './store'

export default {
    name: 'first',
    methods: {
        handleClick() {
            Store.$emit('fromFirst', '来自子组件1的传值')
        }
    }
}
</script>

子组件2

<template>
    子组件2
  <div>{{secondInfo}}</div>
</template>

<script>
import Store from './store'
export default {
    name: 'second', 
    data() {
        return {
            this.secondInfo: null
        }
    },
  created(){
      Store.$on('fromFirst', (info) => {
          this.secondInfo = info
      })
  }
}
</script>

子组件2 里面同样也是使用 Store 实例来监听 fromFirst 事件, 因为子组件1和子组件2里面添加事件和监听事件的是同一个实例，根据我们在上文中分析的 ES6 中的情况, 当 Store 添加了 fromFirst 这个时间之后, Store实例的 $on 就可以监听到这个事件并执行回调。