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

news2024/11/27 14:48:19

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/647006.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL数据库基础 12

MySQL数据库基础 12

第十二章 MySQL数据类型 1. MySQL中的数据类型2. 整数类型2.1 类型介绍2.2 可选属性2.2.1 M2.2.2 UNSIGNED2.2.3 ZEROFILL 2.3 适用场景2.4 如何选择&#xff1f; 3. 浮点类型3.1 类型介绍3.2 数据精度说明3.3 精度误差说明 4. 定点数类型4.1 类型介绍 5. 位类型&#xff1a;BI…
阅读更多...
CSS--Java EE

CSS--Java EE

在前端的代码中&#xff0c;CSS 相关的代码写在什么位置呢&#xff1f; CSS 可以写在<style>标签中外部引入&#xff1a;输入 link: css写在 div 标签中 目录 一、选择器的种类 1 基础选择器 1.1 类选择器 1.2 id选择器 1.3 标签选择器 1.4 通用选择器 小结 2 …
阅读更多...
Spring Security6 全新写法，大变样！

Spring Security6 全新写法，大变样！

文章目录 1. WebSecurityConfigurerAdapter2. 使用 Lambda3. 自定义 JSON 登录3.1 自定义 JSON 登录3.1.1 自定义登录过滤器3.1.2 自定义登录接口 3.2 原因分析3.3 问题解决 Spring Security 在最近几个版本中配置的写法都有一些变化&#xff0c;很多常见的方法都废弃了&#x…
阅读更多...
Java-IO流基础知识

Java-IO流基础知识

目录 1.File类与路径知识 1.File类 2.Java中的路径知识 3.创建File类的实例 4.File类的方法使用 5.File类使用的注意点 2.IO流知识 1.IO流原理 2.文件的读入 3.read()的重载方法&#xff1a;难点 4.文件的写出 1.写出的说明 2.写出操作的具体步骤 5.文件的复制&am…
阅读更多...
测试工程师如何有效的编写bug报告？

测试工程师如何有效的编写bug报告？

为什么要求有效的缺陷报告&#xff1f; 缺陷报告是测试过程中最重要的部分&#xff0c;对产品的质量有较大的影响&#xff0c;是测试人员价值的终极体现。好的缺陷报告可以减少研发部门的二次缺陷率、提高研发修改缺陷的速度、提高测试部门的信用度、增强测试和研发部门的协作…
阅读更多...
Resful API是什么

Resful API是什么

文章目录 摘要1、RESTful API是什么&#xff1f;2、RESTful是什么&#xff1f;参考资料 摘要 RESTful是整个网络应用程序设计风格和开发方式。而RESTful API是其中API的设计风格。 1、RESTful API是什么&#xff1f; API接口在设计命名时&#xff0c;由版本/操作资源名称/操…
阅读更多...
【Spring Boot 初识丨六】依赖注入

【Spring Boot 初识丨六】依赖注入

上一篇讲了 Spring Boot 的beans 本篇来讲一讲 依赖注入 Spring Boot 初识&#xff1a; 【Spring Boot 初识丨一】入门实战 【Spring Boot 初识丨二】maven 【Spring Boot 初识丨三】starter 【Spring Boot 初识丨四】主应用类 【Spring Boot 初识丨五】beans 依赖注入 一、 定…
阅读更多...
攻防世界-Crypto-easychallenge

攻防世界-Crypto-easychallenge

题目描述&#xff1a;将文件下载下来&#xff0c;只有一个pyc文件 1. 思路分析 先向chatgpt问下什么是pyc文件&#xff1a; OK&#xff0c;这里简单总结下&#xff1a; 1. pyc文件是python源码编译后的生成的二进制文件 2. 通过一些库可以逆向出pyc的源代码 那么我们需要做…
阅读更多...
数组题目总结 -- 单调栈问题

数组题目总结 -- 单调栈问题

目录 零. 单调栈一. Next Greater Element(单调栈问题模板)题目简述&#xff1a;思路和代码&#xff1a;I. 思路II. 代码 二. Next Warmer Weather题目简述&#xff1a;思路和代码&#xff1a;I. 思路II. 代码 三. Next Greater Elements&#xff08;循环数组&#xff09;题目简…
阅读更多...
UG\NX二次开发 装配下的点坐标

UG\NX二次开发 装配下的点坐标

文章作者：里海 来源网站：https://blog.csdn.net/WangPaiFeiXingYuan 简介： UF_CURVE_create_point 创建一个点 UF_CSYS_create_temp_csys 创建临时坐标系 以上两个函数都有一个点坐标输入，而且都是输入的绝对坐标系下的点坐标值。下面验证在装配下两个绝对坐标值具体指 “当…
阅读更多...
【三维视觉】空间点集的最小包围盒计算

【三维视觉】空间点集的最小包围盒计算

0 问题描述 假设有一个空间点集&#xff0c;不重合的点数有N个。 N1时&#xff0c;最小包围盒是一个点&#xff1a;中心为其本身&#xff0c;半径无穷小 N2时&#xff0c;最小包围盒是一个圆&#xff1a;中心为连线中点&#xff0c;半径为边长一半 N3时&#xff0c;不共线的三…
阅读更多...
【C#】并行编程实战：任务并行性（上）

【C#】并行编程实战：任务并行性（上）

在 .NET 的初始版本中&#xff0c;我们只能依赖线程&#xff08;线程可以直接创建或者使用 ThreadPool 类创建&#xff09;。ThreadPool 类提供了一个托管抽象层&#xff0c;但是开发人员仍然需要依靠 Thread 类来进行更好的控制。而 Thread 类维护困难&#xff0c;且不可托管&…
阅读更多...
优惠券超发问题该怎么测试？

优惠券超发问题该怎么测试？

在拼夕夕面试中&#xff0c;面试官问了一连串经典的问题&#xff1a;“优惠券库存是怎么扣减的&#xff1f;开发为了解决超发优惠券问题而设计的方案&#xff0c;你了解过吗&#xff1f;你又是如何测试的呢&#xff1f;” 当时听到这些问题还挺懵的&#xff0c;没遇到过超发问…
阅读更多...
MidJourney教程02

MidJourney教程02

1.主体内容&#xff1a;高数AI你需要画什么&#xff1f;比如说&#xff0c;一个男生在电脑前画画&#xff1f; 2.环境北京&#xff1a;例如给某些地点或者物件&#xff0c;比如桌子上&#xff0c;足球场&#xff0c;水面有倒影等&#xff1f; 3.构图镜头&#xff1a;比如说强…
阅读更多...
springboot项目外卖管理 day07-功能补充

springboot项目外卖管理 day07-功能补充

文章目录 前端补充功能1、历史订单功能1.1、梳理过程1.2历史订单展示1.3、效果展示 2、修改/删除地址2.1、回显数据梳理过程 代码展示 2.2、修改地址梳理过程代码 2.3、删除地址梳理过程代码展示 3、再来一单功能3.1、梳理过程3.2、具体实现思路&#xff08;参考一下当初我们怎…
阅读更多...
Linux操作系统——第四章 进程间通信

Linux操作系统——第四章 进程间通信

目录 进程间通信介绍 进程间通信目的 进程间通信发展 进程间通信分类 管道 System V IPC POSIX IPC 管道 什么是管道 匿名管道 管道读写规则 管道特点 命名管道 创建一个命名管道 匿名管道与命名管道的区别 命名管道的打开规则 system V共享内存 共享内存示意…
阅读更多...
【SpringBoot】解决依赖版本不一致报错问题

【SpringBoot】解决依赖版本不一致报错问题

哈喽大家好&#xff0c;我是阿Q。今天在开发代码的过程中&#xff0c;由于手抖&#xff0c;不知道引入了什么包依赖&#xff0c;导致项目启动一直报错&#xff0c;特写本文来记录下解决问题的经过。 文章目录 问题描述报错信息如下报错描述 解决方法总结 问题描述 报错信息如下…
阅读更多...
vite中使用 vite- aliases 插件报错

vite中使用 vite- aliases 插件报错

vite 中使用 vite-aliases 插件报错 vite-aliases 介绍报错内容解决方法 vite-aliases 介绍 vite-aliases 可以帮助我们自动生成别名: 检测你当前目录下包括 src 在内的所有文件夹, 并帮助我们去生成别名。 下载 npm i vite-aliases -D 使用 import { defineConfig } from vi…
阅读更多...
VALSE 2023 无锡线下参会个人总结 6月11日-2

VALSE 2023 无锡线下参会个人总结 6月11日-2

VALSE2023无锡线下参会个人总结 6月11日-2 6月11日会议日程安排Workshop&#xff1a;目标检测与分割程明明&#xff1a;粒度自适应的图像感知技术张兆翔&#xff1a;基于多传感器融合的视觉物体检测与分割 Workshop&#xff1a;ChatGPT与计算机视觉白翔&#xff1a;再谈ChatGPT…
阅读更多...
290. 单词规律

290. 单词规律

290. 单词规律 C代码&#xff1a;别人手搓的 bool wordPattern(char * pattern, char * s){char arr[301][3001];char *p strtok(s, " ");int pos 0;while(p ! NULL) {sprintf(arr[pos], "%s", p);p strtok(NULL, " ");}int len strlen(pat…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023