src_全局事件总线

# 代码

# `代码路径`

$ tree -N
.
├── App.vue
├── components
│   ├── School.vue
│   └── Student.vue
└── main.js

1
2
3
4
5
6
7

# `App.vue`

<template>
  <div class="app">
    <h1>{{msg}} {{studentName}}</h1>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
    import School from './components/School.vue'
    import Student from './components/Student.vue'
    export default {
        name:'App',
        components:{School,Student},
        data() {
          return {
            msg:'你好啊！',
            studentName:'',
          }
        }
    }
</script>

<style>
.app{
  background-color: gray;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# `School.vue`

<template>
  <div class="school">
    <h2> 学校名称：{{name}} </h2>
    <h2> 学校地址：{{address}} </h2>
  </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
              name:'shangguigua',
              address:'beijing'
            }
        },
        mounted() {
          this.$bus.$on('hello',(data)=>{
            console.log('我是School组件，收到了数据',data);
          })
        },
        beforeDestroy() {
          this.$bus.$off('hello')
        },
    }
</script>

<style  scoped>
.school{
  background-color: blue;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# `Student.vue`

<template>
  <div class="student">
    <h2> 学生姓名：{{name}} </h2>
    <h2> 学生性别：{{sex}} </h2>
    <button @click="sendStudentName">点我把学生名字发送给School</button>
  </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
              name:'eryajf',
              sex:'男',
              number:1
            }
        },
        methods: {
          sendStudentName(){
            this.$bus.$emit('hello',this.name)
          }
        },
    }
</script>

<style  scoped>
.student{
  background-color: orange;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# `main.js`

import Vue from "vue"
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this  // 安装全局事件总线
    },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

# 笔记

一种组件间通信的方式，适用于任意组件间通信。
安装全局事件总线：

new Vue({
    ......
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    },
    ......
})

1
2
3
4
5
6
7

使用事件总线：
接收数据：A 组件想接收数据，则在 A 组件中给$bus 绑定自定义事件，事件的回调留在 A 组件自身。

  ```js
  methods(){
    demo(data){......}
  }
  ......
  mounted() {
    this.$bus.$on('xxxx',this.demo)
  }
  ```

提供数据：this.$bus.$emit('xxxx',数据)
最好在 beforeDestroy 钩子中，用$off 去解绑当前组件所用到的事件。

上次更新: 2024/02/28, 13:00:35

← src_TodoList_自定义事件 src_TodoList_事件总线→

src_全局事件总线

# 代码

# 代码路径

# App.vue

# School.vue

# Student.vue

# main.js