Vue消息订阅与发布

news2024/11/22 6:11:10

 

引入第三方库pubsub.js:

npm i pubsub-js

Student.vue

import pubsub from 'pubsub-js'
 methods:{
    sendStudentName(){
      // this.$bus.$emit('hello',this.name)
      pubsub.publish('hello',666)
    }
  },

School.vue

import pubsub from 'pubsub-js'
 mounted() {
    // console.log("school",this.x)
/*    this.$bus.$on('hello',(data)=>{
      console.log('我是school组件,收到了数据',data)
    })*/
    this.pubId = pubsub.subscribe('hello',function (msgName,data){
      console.log('有人发布了hello消息,hello消息的回调执行了',msgName,data)
    })
  },
  beforeDestroy() {
    // this.$off('hello')
    pubsub.unsubscribe(this.pubId)
  },
}

TodoList案例使用消息订阅实现删除功能:

App.vue:

import pubsub from 'pubsub-js'
 mounted() {
    this.$bus.$on('checkTodo',this.checkTodo)
    this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)
  },
  beforeDestroy() {
    this.$bus.$off('checkTodo')
    pubsub.unsubscribe(this.pubId)
  }
}

MyItem.vue:

import pubsub from 'pubsub-js'
  methods:{
    //勾选or取消勾选
    handleCheck(id){
      //通知App组件将对应的todo对象的done值取反
      // this.checkTodo(id)
      this.$bus.$emit('checkTodo',id)
    },
    //删除
    handleDelete(id){
        if (confirm('确定删除吗')){  //confirm根据用户的交互来决定到底是布尔值为真还是为假,点击确定为真,点击取消为假
          // this.deleteTodo(id)
            pubsub.publish('deleteTodo',id)
        }
    }

 

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

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

相关文章

【监控系统】Promethus的查询PromQL详解及案例实战

首先我们先来了解一下什么是PromQL。 PromQL是Prometheus提供了内置的数据查询语言PromQL&#xff0c;全称为Prometheus Query Language。PromQL是对指标(Metric)的查询/聚合/过滤的处理&#xff0c;Metric的语法格式 <metric name>{<label name><label value&…

优维低代码实践:添加构件

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…

Mac 安装启动RabbitMq

使用HomeBrew安装 未安装的请参照我的这篇Mac安装HomeBrew文章 安装 执行命令 brew install rabbitmq启动方式 brew services start rabbitmq端口说明 端口用处5672RabbitMQ通讯端口&#xff0c;也就是连接使用的端口15672RabbbitMQ管理界面端口&#xff0c;需要开启Manage…

区块链实验室(10) - 实例说明PBFT的共识过程

前面描述过PBFT的仿真方式&#xff0c;见区块链实验室(3) – 用Go语言仿真PBFT算法&#xff0c;本文以上述仿真程序说明PBFT的共识过程。 为叙述方便&#xff0c;首先给出1个简化的网络&#xff0c;共4个节点&#xff0c;构成如下图所示的网络。这样的网络可以避免冗余的网络报…

ASEMI快恢复二极管SFP6012A参数, SFP6012A规格

编辑-Z SFP6012A参数描述&#xff1a; 型号&#xff1a;SFP6012A 最大峰值反向电压(VRRM)&#xff1a;1200V 平均整流正向电流(IF)&#xff1a;60A 非重复峰值浪涌电流(IFSM)&#xff1a;500A 工作接点温度和储存温度(TJ, Tstg)&#xff1a;-40 to 175℃ 最大热阻(RθJC…

链动2+1营销系统开发模式深度解析

链动21模式其实是一种针对快消品行业的营销模式&#xff0c;主要逻辑就是用薄利多销丰厚返利的方式来吸引客户&#xff0c;同时快速裂变团队。 这个模式的玩法也很简单&#xff0c;只有代理和老板两种身份&#xff0c;代理身份是用户购买499元产品可以解锁&#xff0c;同时享受…

【压测指南|压力测试核心性能指标及行业标准】

文章目录 压力测试核心性能指标及行业标准指标1&#xff1a;响应时间指标2&#xff1a;吞吐量&#xff08;TPS)指标3&#xff1a;失败率总结&#xff1a; 压力测试核心性能指标及行业标准 在做压力测试时&#xff0c;新手测试人员常常在看报告时倍感压力&#xff1a;这么多性能…

58,#include<algorithm>集合算法set_difference

功能描述&#xff1a; 求两个集合的差集 函数原型&#xff1a; set_difference(iterator beg1,iterator end1,iterator beg2,iterator end2,iterator dest); //求两个集合的差集 //注意&#xff1a;两个集合必须是有序序列 //beg1 容器1开始迭代器 //end1 容器1结束迭代…

【Visual Studio】解决编译时报 .dll 缺失

VS启动白屏&#xff1a; VS2015启动界面卡在白屏的处理方法&#xff08;亲测有效&#xff09; 目前我遇到的 .dll 缺失错误&#xff0c;分为两种情况。 系统 .dll 文件缺失&#xff1a; 点击【调试】->【选项】&#xff0c;在弹出的对话框中点击【调试】->【符号】&…

java实现netcdf(.nc)数据读取解析

netcdf简介及应用说明 NetCDF数据是一种常用的科学数据格式&#xff0c;它可以存储多维数组、元数据和附加的描述信息。NetCDF数据被广泛应用于气象、海洋、地球科学、天文学等领域&#xff0c;可用于分析、可视化和共享数据。 虽然NetCDF数据在科学研究中发挥着重要作用&…

C# winform窗体全屏显示设置

文章目录 C# winform窗体全屏显示设置 C# winform窗体全屏显示设置 窗体全屏显示&#xff0c;并覆盖桌面任务栏。 全屏显示后&#xff0c;如果拖拽标题栏&#xff0c;会使窗体全屏失效&#xff08;如果禁用了最大话按钮&#xff09;&#xff0c;为了解决这样的问题&#xff0…

C语言学习笔记 第一个C语言项目-07

目录 1.新建一个文件夹 2.新建一个文件&#xff0c;后缀以.cpp结尾 3.编写代码 4.编译与执行代码 代码解析 总结 1.新建一个文件夹 2.新建一个文件&#xff0c;后缀以.cpp结尾 如下图所示&#xff0c;选择相应的文件夹&#xff0c;然后点击新建文件按钮&#xff0c;新建的文…

Django框架:使用channels实现websocket,配置和项目实际使用

一、基本配置 依赖包&#xff1a; Django3.2 django-cors-headers3.5.0 redis4.6.0 #操作redis数据库的 channels3.0.0 #websocket channels-redis4.1.0 #通道层需要&#xff0c;依赖redis包项目目录结构&#xff1a; study_websocket --study_websocket --__init__.py --s…

【无标题】小创业公司死亡剧本

感觉蛮真实的&#xff1b;很多小创业公司没有阿里华为的命&#xff0c;却得了阿里华为的病。小的创业公司要想活无非以下几点&#xff1a; 1 现金流&#xff0c;现金流&#xff0c;现金流&#xff1b; 2 产品&#xff0c;找痛点&#xff0c;不要搞伪需求&#xff1b; 3 根据公司…

SpringBoot中配置文件的加载

springboot 启动会扫描一下位置的application.properties或者application.yml文件作为springboot的默认配置文件 file:./config/(项目根目录config文件夹下的配置文件) file:./(项目根目录下的配置文件) classpath:/config/(resources目录config文件下的配置文件) classpat…

Python调用文心千帆的API

文心千帆官网申请使用&#xff1a;点击 1、申请使用 2、使用并创建应用 Python调用 代码(GUI) 代码出处&#xff1a;点我 from tkinter import * from tkinter import messagebox import json import requestsAPI_KEY "API KEY内容" SECRET_KEY "Secret Key…

MySQL的基本概念(数据库类、数据模型、服务启动与连接)

目录 数据库基础 DB和DBMS 数据库的类型 RDBMS的结构 MySQL的服务启动与连接&#xff08;Windows系统下&#xff09; 服务启动 客户端连接 数据库基础 DB和DBMS 什么是DB 将大量的数据保存起来&#xff0c;通过计算机加工而成的可以进行高效访问的数据集合就成为数据…

Android Studio Flamingo Logcat使用方式

旧版Android Studio突然打不开了&#xff0c;安装了新的Flamingo。习惯用Log.e看日志&#xff0c;突然发现logcat没有筛选下拉了。o(╥﹏╥)o 还是需要查看官方文档&#xff1a;https://developer.android.google.cn/studio/debug/logcat?hlzh-cn &#xff08;不知道为啥&…

设备运行健康监控:优化工业运营的关键措施

在现代工业生产中&#xff0c;设备的可靠性和稳定性对于提高生产效率和降低成本至关重要。然而&#xff0c;传统的设备管理方式往往只能实现事后维护和故障处理&#xff0c;无法预防故障的发生&#xff0c;造成了生产中断和不必要的资源浪费。为了更好地应对工业运营中的挑战&a…

决策树学习

决策树学习 决策树决策树基础适用决策树学习的经典目标问题样本的表示训练样本决策树的概念发展历史 经典决策树算法ID3算法属性选择和节点混杂度&#xff08;Impurity&#xff09;ID3 Q1: 哪个属性是最佳属性&#xff1f;当前最佳属性节点选择熵&#xff08;Entropy&#xff0…