Vue3兄弟组件传值之mitt_vue3 mitt没效果-程序员宅基地

技术标签: 前端  vue.js  javascript  

Vue3中事件总线模式已经被移除,官方建议使用外部库,例如mitt。

安装:

npm install --save mitt

首先main.ts挂载全局。

import {
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import mitt from 'mitt'

const Mitt = mitt()
const app = createApp(App)

declare module 'vue' {
    
    export interface ComponentCustomProperties {
    
        $Bus: typeof Mitt 
    }

}

app.config.globalProperties.$Bus = Mitt

app.mount('#app')

A.vue中使用

<template>
  <button @click="emitTip">emit点击</button>
</template>

<script setup lang="ts">
import {
     getCurrentInstance, ComponentInternalInstance } from 'vue'
const {
     proxy } = getCurrentInstance() as ComponentInternalInstance

const emitTip = ():void => {
    
  proxy?.$Bus.emit('changeB', '我是你爸爸真伟大养你这么大')
}
</script>
<style lang="less" scoped>
</style>

B.vue接收

<template>
    <div>
        {
    {
     str }}
    </div>
</template>

<script setup lang="ts">
import {
     ref, getCurrentInstance, ComponentInternalInstance } from 'vue'
const {
     proxy } = getCurrentInstance() as ComponentInternalInstance

let str = ref<string>('')

proxy?.$Bus.on('changeB', (params: any)=> {
    
    str.value = params
})
</script>
<style lang="less" scoped>

</style>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Qdc_k/article/details/127796050

智能推荐

mysql timestamp 差值_MySQL用 TIMESTAMPDIFF() 函数计算时间差-程序员宅基地

文章浏览阅读1.1k次。TIMESTAMPDIFF() 函数将计算两个日期或日期时间表达式之间的整数时间差。其中,我们可以通过参数指定时间差的单位,如:秒、分钟、小时等。语法:TIMESTAMPDIFF(interval,datetime1,datetime2)参数说明:interval:日期比较返回的时间差单位。可以使如下值:FRAC_SECOND:表示间隔是毫秒SECOND:秒MINUTE:分钟HOUR:小时DAY:..._mysql timestamp 作差

PTA 计算天数_7-1 计算天数pta-程序员宅基地

文章浏览阅读6.1k次,点赞7次,收藏28次。本题要求编写程序计算某年某月某日是该年中的第几天。输入格式:输入在一行中按照格式“yyyy/mm/dd”(即“年/月/日”)给出日期。注意:闰年的判别条件是该年年份能被4整除但不能被100整除、或者能被400整除。闰年的2月有29天。输出格式:在一行输出日期是该年中的第几天。输入样例1:2009/03/02输出样例1:61输入样例2:2000/03/02输出样例2:62思路:根据每年小于等于7的月份中,偶月份为30天,奇月份每月31天,2月份除外,2月份闰年29天,非闰年_7-1 计算天数pta

blender简单模型上色_blender上色-程序员宅基地

文章浏览阅读1.3w次,点赞3次,收藏16次。通过UV和色卡来完成简单的上色原先我们的上色方式是通过导出模型的UV图,然后对UV模块分别进行上色,这种方式呢,过于复杂,而且对导出的UV布局图要求过高。之后在完善项目的时候,发现大佬们好像都是用的色卡来完成的模型上色,当时百思不得其解,现在专门学习了一下,原来是一个很简单的事情。1、准备一张色卡,并且在blender中对映材质这里呢我提供了一张包含一些绿色和橙色系得简单色卡,大家可以用PS自己取色扩充,如下图所示。接下来把这张色卡图拖入到shading中得节点面板,便会生成一个节点,并且连接当_blender上色

2021-10-07_有四种水果:苹果(apples)、梨(pears)、橘子(oranges)和葡萄(grapes),单-程序员宅基地

文章浏览阅读548次。noi题库1017. 价格查询题目描述编程实现以下功能:查询水果的单价。有4种水果,苹果(apples)、梨(pears)、桔子(oranges)和葡萄(grapes),单价分别是3.00元/公斤,2.50元/公斤,4.10元/公斤和10.20元/公斤。运行程序后,首先在屏幕上显示以下菜单(编号和选项)(见样例)。当用户输入编号1~4,显示相应水果的单价(保留1位小数);输入0,退出查询;输入其他编号,显示价格为0。输入输入一个整数。输出输出对应的结果。样例输入3样例输入[1] ap_有四种水果:苹果(apples)、梨(pears)、橘子(oranges)和葡萄(grapes),单价分别是3.

获取CloudFlare上的所有域名的ID (zone_identifier) - by PHP_cloudflare怎么导出所有域名-程序员宅基地

文章浏览阅读7k次。效果图CF_api_get_zone_ids.php<?php /** * Title: 获取CloudFlare上的所有域名的ID (zone_identifier) * Author: Rudon <[email protected]> * Date: 2019-03-08 * * https:..._cloudflare怎么导出所有域名

移动物联网卡构建智慧医疗体系,加强医院管理效率_中移物联网医院-程序员宅基地

文章浏览阅读640次。生活品质的提升,促进了人们对医疗健康领域的进一步关注。然而我国人口基数庞大、医疗资源缺稀,“看病难、看病贵”一直是政府、社会与民众难以调和的矛盾。移动物联网卡的出现使医疗救治难题出现新的曙光。作为实现万物互联的核心节点,移动物联网卡智慧医疗把医疗设备、监控系统、医疗数据等内容连接压缩起来,架构新型的物联网卡智慧医疗体系。移动物联网卡智慧医疗的出现是一项利国利民的重要项目,对促进和谐社会、构建智慧城..._中移物联网医院

随便推点

Beginning ARC in iOS 5 Tutorial Part 2_warning[440]: the section alignment is less than 2-程序员宅基地

文章浏览阅读779次。Note from Ray: This is the twelfth iOS 5 tutorial in the iOS 5 Feast! This tutorial is a free preview chapter from our new bookiOS 5 By Tutorials. Matthijs Hollemans wrote this chapter – the same_warning[440]: the section alignment is less than 2^2. data in literal pool m

面试题--乱2-程序员宅基地

文章浏览阅读889次。windows服务器使用的远程连接端口默认 3389 查询max 记录: nslookup dig postfix的配置文件main,cf中以下哪个参数是设置邮件大小的,message_size_limit打开网站,出现以下错误Fatal error: Unable to read **** bytes in或者是Fatal error: Corrupte..._让一个使用者bobby能够进行cp/dirl/file/dir2的指令时,请说明dirl、file、dir

c++期末上机oj题目汇总二(2018北邮信通版)纯干货_北邮c++期末考试-程序员宅基地

文章浏览阅读2.4k次,点赞9次,收藏73次。学长学姐回忆版本6-11今天一气呵成上传系列,就是脖子有点酸题组六1.大小写转换2.计算有多少个盈数3.输出最大值,平均数和及格人数4.统计字母个数5.学生类..._北邮c++期末考试

airtest踩坑日记_cannot find any visible node by query uiobjectprox-程序员宅基地

文章浏览阅读2.4k次,点赞4次,收藏5次。本来发现airtest,以为是个神器,终于可以摆脱按键精灵的束缚了,结果好家伙,这个玩意就是网易开发的bug集,全是bug,一步一步踩坑过来的,以下为记录的bug以及应对方法:(PS:移动原生的测试人员建议直接用poco吧,坑太多,不建议踩,而且它也是调用的poco)一、OpenCV Error: Assertion failed cv2.error: C:\projects\opencv-python\opencv\modules\imgproc\src\color.cpp:9716: error.._cannot find any visible node by query uiobjectproxy of

汇编语言与汇编器(目前有哪些汇编语言与汇编器)_汇编语言编译器-程序员宅基地

文章浏览阅读7.4k次,点赞9次,收藏23次。以下内容源于网络资源的学习与整理,如有其侵权请告知删除。_汇编语言编译器

SWIFT_信用证swift是实时的吗-程序员宅基地

文章浏览阅读99次。百科x混知:图解国际资金清算系统发展历程1973年5月,来自美国、加拿大和欧洲的15个国家的239家银行宣布正式成立SWIFT,其总部设在比利时的布鲁塞尔,它是为了解决各国金融通信不能适应国际间支付清算的快速增长而设立的非盈利性组织,负责设计、建立和管理SWIFT国际网络,以便在该组织成员间进行国际金融信息的传输和确定路由。国际资金清算系统(SWIFT)由环球同业银行金融电讯协会管理,SWIFT的使用,使银行的结算提供了安全、可靠、快捷、标准化、自动化的通讯业务,从而大大提高了银行的结算速度。_信用证swift是实时的吗

推荐文章

热门文章

相关标签