Vue2基础全套教程合集:点击跳转 Vue2高级全套教程合集:点击跳转
一、全局事件总线
-
定义:一种组件间通信的方式,适用于任意组件间通信。
-
安装全局事件总线:
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ...... })
-
使用事件总线:
-
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }
-
提供数据:
this.$bus.$emit('xxxx',数据)
-
-
最好在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>
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>
二、TodoList案例(改良版)
此处不展示全部代码,如需全部代码请点击跳转浏览TodoList案例第一版。
- main.js改动:引入了全局事件总线
..... // 省略导包
//创建vm
new Vue({
....
beforeCreate() {
Vue.prototype.$bus = this
},
})
- App.vue 页面的改动:
- 不再向MyList组件传递自定义事件了,而是通过全局事件总线进行事件绑定,在App页面中进行事件的绑定,在子组件中触发。
- 将所有的自定义事件绑定换为了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>
- 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>
- 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>
- 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>