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

最新推荐文章于 2024-05-05 19:34:44 发布
最新推荐文章于 2024-05-05 19:34:44 发布
阅读量806 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44230693/article/details/131215339
版权

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>
怀梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli 使用vue-bus来全局控制的实例讲解
10-18
`vue-bus`是一种轻量级的事件总线，用于在Vue组件之间传递数据，尤其适用于非父子或非兄弟组件之间的通信。相比于Vuex，它的使用更为简单，但可能需要谨慎处理事件监听的生命周期。 首先，你需要通过`npm`安装`vue-...
vue bus全局事件中心简单Demo详解
11-30
这时，我们可以利用Vue Bus（也称为自定义事件总线）来实现全局事件的发布与订阅，从而在不依赖于组件树的情况下传递数据。 Vue Bus 是一种轻量级的解决方案，它创建了一个单一实例的Vue对象，用于作为全局事件的...
Vue全局事件总线以及消息订阅与发布
weixin_46515434的博客
10-09 290
一种可以在任意组件间通信的方式，本质上就是一个对象，他必须满足以下条件：1.所有组件对象都必须能看见他。2.这个对象必须能够使用 $on $emit $off方法去绑定、触发和解绑事件。（因为 $on ,和 $off 和 $emit 这三个方法在Vue原型对象上，所以，我们的全局事件总线就要放在Vue的原型对象（vue.prototype）上，以确保每个组件都能访问得到）
vue通知提醒消息
weixin_55853065的博客
10-17 8254
最近有个项目需求就是在客户端的右上角要实时展示提醒消息，下面来看下简单的实现步骤/* 全局Notification */})}
Vue 全局事件总线 消息的订阅与发布的详细介绍与使用
最新发布
yxh_live的博客
05-05 884
Vue 全局事件总线 消息的订阅与发布的详细介绍与使用
vue中实现任意组件间通信（全局事件总线、消息订阅与发布）
Jackmat的博客
05-29 278
我们可以在new Vue()时，在其beforeCreate生命周期里，加上Vue.prototype.$bus=this，此时的this指向的是Vue，由于Vue只有一个，并且都在各组件的原型链上。1.全局事件总线，顾名思义，可以适用于任意组件间通信，我们需要通过$bus这个中间傀儡来实现，我们可以把$bus安装到Vue身上，这样可以让所有组件都能看到它，：我们可以给需要接收数据的一方加上。：我们可以给需要提供数据的一方加上。
vue实现全局消息提醒功能（vue-extend）
11-11 3868
Vue.extend 实现 消息提醒功能
Vue消息总线
llwhlee的博客
06-25 622
vue消息总线
详解vue-router和vue-cli以及组件之间的传值
08-30
安装 Vue CLI 可以通过全局安装命令： ``` cnpm install vue-cli -g ``` 然后使用 `vue init` 命令创建项目，例如，使用 `webpack-simple` 模板创建项目： ``` vue init webpack-simple vue_webpack ``` 接下来，...
在vue-cli中组件通信的方法
08-28
非父子组件间的通信通常使用 Vue 实例的全局事件总线（Event Bus）或者 Vuex 状态管理器。这里以 Event Bus 为例： 1. 创建一个全局的 Vue 实例作为事件总线： ```javascript // event-bus.js import Vue from 'vue...
基于vuecli的脚手架
08-12
这些插件可以用来实现全局的功能，比如事件总线、状态管理、路由拦截等。自定义插件需要遵循Vue的插件规范，通过`Vue.use()`方法进行安装。 描述中的"改变单文件.vue方式，换成html js less架构"可能意味着开发者...
Vue-消息订阅与发布(pub/sub)
见证自己学习,成长的记录
06-22 3849
一种组件间通信的方式，适用于任意组件间通信。引入:接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods(){......this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息pubsub.publish('xxx',数据)最好在beforeDestroy钩子中，用去取消订阅。
vue学习-08全局事件总线与消息订阅与发布
好看的皮囊千篇一律，有趣的灵魂万里挑一。
09-28 360
Vue.js中的消息订阅与发布通常是通过一个第三方库或插件来实现的，最常见的库之一是vue-bus。这种模式允许不同组件之间进行解耦的通信，类似于全局事件总线，但提供了更多的功能和控制。 pubsub-js是一个独立的 JavaScript 库，用于实现消息发布和订阅模式，它不是 Vue.js 的一部分。你可以在 Vue.js 项目中使用它来实现组件之间的消息订阅和发布
【Vue项目】 bus事件总线
Allen_Sushi首页
11-17 1671
Vue2 bus事件总线的原理与使用
Vue学习：Vue中的全局事件总线和消息的订阅与发布
qq_49916504的博客
06-15 895
Vue中的全局事件总线可以任意组件间的相互通信，其原理就是创建一个东西能够让所有的组件和vm都能识别到，这个东西就可以叫做全局事件总线。
Vue事件总线（EventBus）使用指南：详细解析与实战应用
热门推荐
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 1万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
HTML/CSS/学习(一)
qq_43239161的博客
09-09 123
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaSc...
Vue（组件间通信：props、自定义事件、全局事件总线、消息订阅与发布）
weixin_57920269的博客
05-08 389
props、自定义事件、任意组件间通信、全局事件总线、消息订阅发布
vue2 全局事件总线
08-19
Vue.js 2 中的全局事件总线是一种简单的通信机制，它允许在不同的组件之间进行通信。通过全局事件总线，一个组件可以向其他组件发送事件，而其他组件可以监听这些事件并对其做出响应。 要使用全局事件总线，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值