Vue兄弟组件间传值之事件总线

心已赠人 2022-12-22 12:28 270阅读 0赞

## 第一步：在src/utils目录下创建文件bus.js ##

// 专门用来传递传递消息
    import Vue from 'vue'
    
    export default new Vue()

**注**：公共文件bus.js专门用来传递消息

## 第二步：数据发送方Child.vue ##

<template>
      <div>
        <h1>组件1</h1>
        <button @click="passMsg">传递数据给兄弟节点</button>
      </div>
    </template>
    <script> import bus from '../utils/bus' export default { name: 'Child', methods: { passMsg () { bus.$emit('message', 'data from Child') } } } </script>

## 第三步：数据接收方Child2.vue ##

<template>
      <div>
        <h1>组件2</h1>
        来自兄弟节点的数据：{
       {msg}}
      </div>
    </template>
    <script> import bus from '../utils/bus' export default { name: 'Child2', data () { return { msg: '' } }, mounted () { bus.$on('message', (data) => { this.msg = data }) } } </script>

## 第四步：App.vue ##

<template>
      <div id="app">
        <h-child></h-child>
        <h-child2></h-child2>
      </div>
    </template>
    <script> // 引入子组件 import HChild from './views/Child' import HChild2 from './views/Child2' export default { name: 'Parent', components: { HChild, HChild2 } } </script>

结果：  
![在这里插入图片描述][20201120140645381.png_pic_center]  
单击按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]

[20201120140645381.png_pic_center]: /images/20221120/a730ce42122b4773bd488e0aa38d4a5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/16e043e9ef2c403792d2ed6035e9c9db.png