您现在的位置是：首页 >学无止境 >Vue CLI 全局事件总线 消息的订阅与发布网站首页学无止境

Vue CLI 全局事件总线 消息的订阅与发布

怀梦 2024-10-29 00:01:06
简介Vue CLI 全局事件总线 消息的订阅与发布

3.10. 全局事件总线（GlobalEventBus）

一种可以在任意组件间通信的方式，本质上就是一个对象，它必须满足以下条件

  1. 所有的组件对象都必须能看见他
  2. 这个对象必须能够使用$on $emit $off方法去绑定、触发和解绑事件

使用步骤

  1. 定义全局事件总线 main.js
    new Vue({
  ...
  beforeCreate() { 
    Vue.prototype.$bus = this; // 安装全局事件总线
  },
  ...
})
  2. 使用事件总线
    1. 接收数据：A组件想接收数据，则在A组件中给**$bus**绑定自定义事件，事件的回调留在A组件自身
    export default { 
  methods() { 
    demo(data) {
      ...
    } 
  } 
  ... mounted() { 
    this.$bus.$on('xxx',this.demo) 
  } 
}
    1. 提供数据：this.$bus.$emit(‘xxx’,data)
  3. 最好在beforeDestroy钩子中，用$off()去解绑当前组件所用到的事件

src/main.js

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

Vue.config.productionTip = false;

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

src/App.vue

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

<script> 
    // 引入组件
    import Student from './components/Student.vue';
    import School from './components/School.vue';

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

<style scoped>
    .app{
        background-color: gray;
        padding: 5px;
    } 
</style>

src/components/School.vue

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

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

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

src/components/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: "liqb",
                sex: '男'
            }
        },
        methods: {
            sendStudentName() {
                this.$bus.$emit('hello', this.name);
            }
        }
    }
</script>

<style lang="less" scoped>
    .student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>

在这里插入图片描述

使用自定义事件优化Todo-List

src/mian.js

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

Vue.config.productionTip = false;

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

src/App.vue

<template>
    <div id="root"> 
        <div class="todo-container"> 
            <div class="todo-wrap">
                <MyHeader @addTodo="addTodo"/>
                <MyList :todos="todos"/>
                <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template> 

<script> 
    // 引入组件
    import MyFooter from './components/MyFooter';
    import MyHeader from './components/MyHeader';
    import MyList from './components/MyList';

    export default { 
        name:'App', 
        components:{
            MyFooter,
            MyHeader,
            MyList
        },
        data() {
            return {
                // 从本地存储中获得数据，null就创建空数组[]
                todos: JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods: {
            // 添加一个todo
            addTodo(todoObj) {
                this.todos.unshift(todoObj);
            },
            // 勾选or取消勾选一个todo
            checkTodo(id) {
                this.todos.forEach((todo)=>{
                    if(todo.id === id) todo.done = !todo.done;
                });
            },
            // 删除一个todo
            deleteTodo(id) {
                this.todos = this.todos.filter( todo => todo.id !== id )
            },
            // 全选or取消全选 
            checkAllTodo(done){
                this.todos.forEach((todo)=>{
                    todo.done = done;
                });
            },
            // 清除所有已经完成的todo
            clearAllTodo(){
                this.todos = this.todos.filter((todo)=>{
                    return !todo.done;
                })
            }
        },
        mounted() {
            this.$bus.$on("checkTodo", this.checkTodo);
            this.$bus.$on("deleteTodo", this.deleteTodo);
        },
        beforeDestroy() {
            this.$bus.$off("checkTodo");
            this.$bus.$off("deleteTodo");
        },
        // 数据发生改变就放到本地存储中，注意深度侦听，以及JSON转化为字符串
        watch: {
            todos: {
                deep:true,
                handler(value) {
                    localStorage.setItem('todos', JSON.stringify(value));
                }
            }
        }
    }
</script>

src/components/MyItem.vue

<template>
    <li>
       <label>
           <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
           <!-- <input type="checkbox" v-model="todo.done"/> -->
           <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
           <span>{{todo.title}}</span>
       </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
    export default {
        name: "Item",
        // 声明接收todo
        props:['todo'],
        methods: {
            // 勾选or取消勾选
            handleCheck(id) {
                // 通知App组件将对应的todo对象的done值取反
                this.$bus.$emit('checkTodo',id);
            },
            // 删除
            handleDelete(id){
                if(confirm('确定删除吗？')) {
                    // 通知App组件将对应的todo对象删除
                    this.$bus.$emit('deleteTodo',id);
                }
            }
        }
    }
</script>

3.11. 消息的订阅与发布（基本不用）

消息订阅与发布（pubsub）消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信

使用步骤

  1. 安装pubsub：npm i pubsub-js
  2. 引入：import pubsub from ‘pubsub-js’
  3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
    export default { 
  methods: { 
    demo(msgName, data) {
      ...
    } 
  } 
  ... mounted() { 
    this.pid = pubsub.subscribe('xxx',this.demo); 
    } 
}
  4. 提供数据：pubsub.publish(‘xxx’,data)
  5. 最好在beforeDestroy钩子中，使用**pubsub.unsubscribe(pid)**取消订阅

src/components/School.vue

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

<script>
    import pubsub from 'pubsub-js';

    export default {
        name:'School',
        data() {
            return {
                name: "莆田学院",
                address: '福建莆田'
            }
        },
        methods: {
            demo(msgName, data) {
                console.log('我是School组件，收到了数据：',msgName, data)
            }
        },
        mounted() {
            this.pubId = pubsub.subscribe('hello', this.demo);
        },
        beforeDestroy() {
            pubsub.unsubscribe(this.pubId) // 取消订阅
        }
    }
</script>

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

src/components/Student.vue

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

<script>
    import pubsub from 'pubsub-js';

    export default {
        name:'Student',
        data() {
            return {
                name: "liqb",
                sex: '男'
            }
        },
        methods: {
            sendStudentName() {
                pubsub.publish('hello', this.name) // 发布消息
            }
        }
    }
</script>

<style lang="less" scoped>
    .student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>

使用消息的订阅与发布优化Todo-List

src/App.vue

<template>
    <div id="root"> 
        <div class="todo-container"> 
            <div class="todo-wrap">
                <MyHeader @addTodo="addTodo"/>
                <MyList :todos="todos"/>
                <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
            </div>
        </div>
    </div>
</template> 

<script> 
    // 引入组件
    import pubsub from 'pubsub-js';
    import MyFooter from './components/MyFooter';
    import MyHeader from './components/MyHeader';
    import MyList from './components/MyList';

    export default { 
        name:'App', 
        components:{
            MyFooter,
            MyHeader,
            MyList
        },
        data() {
            return {
                // 从本地存储中获得数据，null就创建空数组[]
                todos: JSON.parse(localStorage.getItem('todos')) || []
            }
        },
        methods: {
            // 添加一个todo
            addTodo(todoObj) {
                this.todos.unshift(todoObj);
            },
            // 勾选or取消勾选一个todo
            checkTodo(id) {
                this.todos.forEach((todo)=>{
                    console.log(todo.id);
                    if(todo.id === id) todo.done = !todo.done;
                });
            },
            // 删除一个todo
            deleteTodo(_, id) {
                this.todos = this.todos.filter( todo => todo.id !== id )
            },
            // 全选or取消全选 
            checkAllTodo(done) {
                this.todos.forEach((todo)=>{
                    todo.done = done;
                });
            },
            // 清除所有已经完成的todo
            clearAllTodo() {
                this.todos = this.todos.filter((todo)=>{
                    return !todo.done;
                })
            }
        },
        mounted() {
            this.$bus.$on("checkTodo", this.checkTodo);
            this.pubId = pubsub.subscribe('deleteTodo', this.deleteTodo);
        },
        beforeDestroy() {
            this.$bus.$off("checkTodo");
            pubsub.unsubscribe(this.pubId) // 取消订阅
        },
        // 数据发生改变就放到本地存储中，注意深度侦听，以及JSON转化为字符串
        watch: {
            todos: {
                deep:true,
                handler(value) {
                    localStorage.setItem('todos', JSON.stringify(value));
                }
            }
        }
    }
</script>

src/components/myItem.vue

<template>
    <li>
       <label>
           <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
           <!-- <input type="checkbox" v-model="todo.done"/> -->
           <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
           <span>{{todo.title}}</span>
       </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
    import pubsub from 'pubsub-js';

    export default {
        name: "Item",
        // 声明接收todo
        props:['todo'],
        methods: {
            // 勾选or取消勾选
            handleCheck(id) {
                // 通知App组件将对应的todo对象的done值取反
                this.$bus.$emit('checkTodo',id);
            },
            // 删除
            handleDelete(id){
                if(confirm('确定删除吗？')) {
                    // 通知App组件将对应的todo对象删除
                    pubsub.publish('deleteTodo', id) // 发布消息
                }
            }
        }
    }
</script>
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐