vue事件总线

前言：
👏作者简介：我是笑霸final，一名热爱技术的在校学生。
📝个人主页：个人主页1 || 笑霸final的主页2
📕系列专栏：前端
📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，👍点赞👍 + 👀关注👀 + 🤏收藏🤏

一、步骤总结

在 vue 里我们可以通过全局事件总线来实现任意组件之间通信
它的原理是给 Vue 的原型对象上面添加一个属性。这样的话我所有组件的都可以访问到这个属性，然后可以通过这个属性来访问其他组件给这个属性上面绑定的一些方法，从而去传递数据。而且这个属性还可以去访问 Vue 实例对象上的方法。因为 Vue 组件构造函数的原型对象的原型对象是指向 Vue 的原型对象的

1.安装全局事件总线

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus=this//安装全局事件总线
  },
}).$mount('#app')
1
2
3
4
5
6

2.收数据的“人”绑定自定事件别忘了解绑事件
mounted和beforeDestroy

 
  mounted(){// 加载时给$bus绑定事件
      this.$bus.$on('deletetodo',this.deletetodo)
      this.$bus.$on('changTodos',this.changTodos)

    },
    beforeDestroy(){//销毁时解绑
      this.$bus.$off('deletetodo')
      this.$bus.$off('changTodos')
    }
1
2
3
4
5
6
7
8
9
10

3.给传输数据的‘人’触发事件

<template>
    <li>
      <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>
            <span >{{todo.title}}span>
      label>
        <button class="btn btn-danger" @click="mydelete(todo.id)">删除button>
    li>
  
template>
1
2
3
4
5
6
7
8
9
10

methods: {
        handleCheck(id){
            this.$bus.$emit('changTodos',id)
        },
        mydelete(id){
            if(confirm("确认删除吗？")){
              this.$bus.$emit('deletetodo',id)
            
            }
        }
    },
1
2
3
4
5
6
7
8
9
10
11

二、详细介绍(小案列计划小帮手)

组件关系

2.1在main安装全局事件总线

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

Vue.config.productionTip = false

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

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

2.1 在收数据的“人”绑定自定事件（app）

<template>
<div>
       
        <div class="d1">计划小帮手div>
        <br>
  <div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
    
      
      <MyHeader >MyHeader>
      
      <MyList :todos="todos">MyList>
      
      <MyFooter :todos="todos">MyFooter>
    div>
  div>
div>
div>
  
template>

<script>
import MyList from './components/MyList.vue';
import MyFooter from './components/MyFooter.vue';
import MyHeader from './components/MyHeader.vue';


export default {
    name: "App",
    components: { MyList, MyFooter,MyHeader },
    data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos'))||[]
      //{id:'1',title:'吃饭',done:false},
      // {id:'2',title:'睡觉',done:true},
      // {id:'3',title:'打豆豆',done:true},
      //{id:'4',title:'学习',done:true}
    }
  },
  methods: {
    //添加一个todo
    addTodos(x){
      this.todos.unshift(x)
    },
    //修改一个todo
    changTodos(id){
      this.todos.forEach((todo)=>{
        if(todo.id==id){
          todo.done=!todo.done
        }
      })
    },
    //删除一个todo
    deletetodo(id){
      this.todos=this.todos.filter((todo)=>{
        localStorage.removeItem(id)
        return todo.id!==id
      })
    },
    //删除所有选中的todo
    deleteappok(){
      this.todos=this.todos.filter((todo)=>{
        if(todo.done==true){
          localStorage.removeItem(todo.id)
        }
        return todo.done!==true
      })
    },
    //全选or取消全选
    cheackAlltodo(done){
        this.todos.forEach(todo=>{
          todo.done=done
        })
    }
  },
  watch:{
    todos:{
      deep:true,
      handler(value){
          localStorage.setItem('todos',JSON.stringify(value))
      }
    }
  },
  // 给$bus绑定事件
  mounted(){
      this.$bus.$on('deletetodo',this.deletetodo)
      this.$bus.$on('changTodos',this.changTodos)
      this.$bus.$on('addTodos',this.addTodos)
      this.$bus.$on('deleteappok',this.deleteappok)
      this.$bus.$on('cheackAlltodo',this.cheackAlltodo)

    },
    beforeDestroy(){//销毁时解绑
      this.$bus.$off('deletetodo')
      this.$bus.$off('changTodos')
      this.$bus.$off('addTodos',this.addTodos)
      this.$bus.$off('deleteappok',this.deleteappok)
      this.$bus.$off('cheackAlltodo',this.cheackAlltodo)
    }
}
script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.d1{
  margin: 0 auto; 
  text-align: center
}




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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

3.1 3.给传输数据的‘人’触发事件(除app的其他组件)

MyHeader

<template>
    <div class="todo-header">
      
      
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add" v-model="title"/>
      div>
 
template>

<script>
import {nanoid} from 'nanoid'

export default {
    name:'MyHeader',
    data() {
      return {
        title:''
      }
    },
   
    methods: {
      add(){
        if(!this.title) return alert("输入不能为空");
        //将用户的输入包装成一个对象
        const todobj={id:nanoid(),title:this.title,done:false}
        this.$bus.$emit('addTodos',todobj)
        this.title=''
      }
    },
   
}
script>

<style scoped>

/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

MyItem

<template>
    <li>
      <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)"/>
            <span >{{todo.title}}span>
      label>
        <button class="btn btn-danger" @click="mydelete(todo.id)">删除button>
    li>
  
template>

<script>
export default {
    name:'MyItem',
    //声明接受对象
    props:['todo'],
    methods: {
        handleCheck(id){
            this.$bus.$emit('changTodos',id)
        },
        mydelete(id){
            if(confirm("确认删除吗？")){
              this.$bus.$emit('deletetodo',id)
            
            }
        }
    },
    
}
script>

<style  scoped>

/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right ;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover{
  /* 鼠标悬浮效果 */
  background-color: chartreuse;
}
li:hover button {
  float: right ;
  display: block;
  margin-top: 3px;
}
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

MyFooter

<template>
  <div class="todo-footer">
        <label>
          <input type="checkbox"  
          :checked='todos.length===doneTotal &&todos.length>0'
          @change="chaeckAll"
          />
          <span>全选span>
        label>
        
        <span >
          <span>已完成{{doneTotal}}项 span> / 全部{{todos.length}}项
        span>
        <button class="btn btn-danger" @click='deteleok' >打卡button>
      div>
template>

<script>
export default {
    name:'MyFooter',
    props:['todos'],
    computed:{
      doneTotal(){
        let i=0;
        this.todos.forEach((a)=>{
            if(a.done){
              i++
            }
        })
        return i
      }
    },
    methods: {
      deteleok(){
        //通知app删除选中的
        this.$bus.$emit('deleteappok')
        
        alert("今天内容已经全部完成！！！！请继续保持")
      },
      //全选or取消全选
      chaeckAll(value){
         
        
          this.$bus.$emit('cheackAlltodo' ,value.target.checked)

      }
    },
}

script>

<style  scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}


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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

注意MyList并不需要传递数据

效果图

初始界面

添加一个目标

删除

其他功能