Vue2高级-全局事件总线、TodoList案例（改良版）

---

一、全局事件总线

1. 定义：一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

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

3. 使用事件总线：

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

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
      1
      2
      3
      4
      5
      6
      7

   2. 提供数据：this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

代码示例： 通过on绑定事件（接收数据方），通过$emit触发事件（传递数据方）

School.vue

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

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>
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

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:'张三',
				sex:'男',
			}
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

二、TodoList案例（改良版）

此处不展示全部代码，如需全部代码请点击跳转浏览TodoList案例第一版。

• main.js改动：引入了全局事件总线

..... // 省略导包
//创建vm
new Vue({
	....
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})
1
2
3
4
5
6
7
8

• App.vue 页面的改动：
  1. 不再向MyList组件传递自定义事件了，而是通过全局事件总线进行事件绑定，在App页面中进行事件的绑定，在子组件中触发。
  2. 将所有的自定义事件绑定换为了v-on方式绑定，而不是v-bind。

<template>
	<div id="root">
		.........
			<MyHeader @addTodo="addTodo"/>
			<MyList :todos="todos"/>
			<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
		.........
	</div>
</template>
<script>
	.....
	export default {
		name:'App',
		components:{MyHeader,MyList,MyFooter},
		data() {
			return {
				.....
			}
		},
		methods: {
			.....
		},
		mounted() {
			this.$bus.$on('checkTodo',this.checkTodo)
			this.$bus.$on('deleteTodo',this.deleteTodo)
		},
		beforeDestroy() {
			this.$bus.$off('checkTodo')
			this.$bus.$off('deleteTodo')
		},
	}
</script>
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

• MyList.vue 组件的改动：不再需要向MyItem组件绑定自定义事件了，而是通过时间总线进行触发。

<template>
	<ul class="todo-main">
		<MyItem 
			v-for="todoObj in todos"
			:key="todoObj.id" 
			:todo="todoObj" 
		/>
	</ul>
</template>

<script>
	import MyItem from './MyItem'

	export default {
		name:'MyList',
		components:{MyItem},
		//声明接收App传递过来的数据
		props:['todos']
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• MyHeader.vue组件的改动：修改了addTodo方法的触发方式，改为了$emit触发。

<template>
	........
	// 此处没有改动
</template>

<script>
import { nanoid } from 'nanoid'
export default {
	name: 'MyHeader',
	data() {
		return {
			//收集用户输入的title
			title: ''
		}
	},
	methods: {
		add() {
			.....
			// 将之前的props配置触发，改为了$emit触发。
			this.$emit('addTodo', todoObj, 1, 2, 3)
			.....
		}
	},
}
</script>
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

• MyFooter.vue组件的改动： 控制全选方法和清除所有完成方法均改为了$emit触发。

<template>
	<div class="todo-footer" v-show="total">
		......
	</div>
</template>

<script>
export default {
	name: 'MyFooter',
	props: ['todos'],
	computed: {
		.......,
		//控制全选框
		isAll: {
			//全选框是否勾选
			get() {
				return this.doneTotal === this.total && this.total > 0
			},
			//isAll被修改时set被调用
			set(value) {
				// this.checkAllTodo(value) // 原来的版本
				this.$emit('checkAllTodo', value) // 改良后
			}
		}
	},
	methods: {
		//清空所有已完成
		clearAll() {
			// this.clearAllTodo() // 原来的版本
			this.$emit('clearAllTodo') // 改良后
		}
	},
}
</script>
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
33
34

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通