Vue3兄弟组件传值之mitt的超详细讲解
更新时间:2022年6月16日 13:45 点击:1542 作者:潇湘轮回
前言
Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或 tiny-emitter。
比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢?
- 首先它足够小,仅有200bytes。
- 其次支持全部事件的监听和批量移除。
- 它还不依赖 Vue 实例,可以跨框架使用,React 或者 Vue,甚至 jQuery 项目都能使用同一套库。
项目中安装mitt
npm install --save mitt
使用方式一:在原型中声明
一、在 main.ts\color{#ef2d26}{main.ts}main.ts 中注册挂载到全局
import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' import router from "./router"; const app = createApp(App) // vue3挂载到全局 app.config.globalProperties.$mitt = mitt(); app.use(router).mount('#app')
二、在home.vue组件中使用 emit\color{#ef2d26}{emit}emit 发送信息
<template> <div class="home-container"> <p>这里是home组件</p> <button @click="sendMitt">$mitt发送数据</button> <About></About> </div> </template> <script lang="ts" setup> import { getCurrentInstance, ref, ComponentInternalInstance } from 'vue'; import About from '../about/about.vue' const { appContext } = getCurrentInstance() as ComponentInternalInstance; const money = ref<number>(98); const sendMitt = () => { appContext.config.globalProperties.$mitt.emit('moneyEvent', money.value += 2); } </script> <style lang="less"> </style>
二、在about.vue组件中使用 on\color{#ef2d26}{on}on 接收信息
<template> <div class="about-container"> <p>这里是about组件</p> <p>接收到的数据:{{ amount }}</p> </div> </template> <script lang="ts" setup> import { ref, getCurrentInstance, ComponentInternalInstance, onBeforeMount, onMounted } from 'vue'; const amount = ref(0); const { appContext } = getCurrentInstance() as ComponentInternalInstance; onMounted(() => { appContext.config.globalProperties.$mitt.on('moneyEvent', (res: number) => { amount.value = res; }) }) onBeforeMount(() => { appContext.config.globalProperties.$mitt.off('moneyEvent'); }); </script> <style lang="less"> .about-container { background-color: #f0f0f0; } </style>
使用方式二:在组件中引用
一、新建 bus.ts\color{#ef2d26}{bus.ts}bus.ts 文件
import mitt from "mitt"; const emiter = mitt(); export default emiter;
二、在home.vue组件中引入并使用 emit\color{#ef2d26}{emit}emit 发送信息
<template> <div class="home-container"> <p>这里是home组件</p> <button @click="sendMitt">$mitt发送数据</button> <About></About> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; import About from '../about/about.vue' import emitter from '../../utils/bus' const money = ref<number>(98); const sendMitt = () => { emitter.emit('moneyEvent', money.value += 2); } </script> <style lang="less"> </style>
二、在about.vue组件中引入并使用 on\color{#ef2d26}{on}on 接收信息
<template> <div class="about-container"> <p>这里是about组件</p> <p>接收到的数据:{{ amount }}</p> </div> </template> <script lang="ts" setup> import { ref, onBeforeMount, onMounted } from 'vue'; import emitter from '../../utils/bus' const amount = ref(0); onMounted(() => { emitter.on('moneyEvent', (res: any) => { amount.value = res; }); }) onBeforeMount(() => { emitter.off('moneyEvent'); }); </script> <style lang="less"> .about-container { background-color: #f0f0f0; } </style>
总结
到此这篇关于Vue3兄弟组件传值之mitt的文章就介绍到这了,更多相关Vue3兄弟组件传值mitt内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7106311753717252132
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下...2020-09-16
- 这篇文章主要给大家介绍了关于C#窗体间常用的几种传值方式及委托与事件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了基于Vue中的父子传值问题解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-10-14
- 这篇文章主要给大家介绍了关于Vue组件传值过程中丢失数据的分析与解决方案,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-17
- 这篇文章主要给大家介绍了关于微信小程序页面间传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-09
- ASP.NET 页面传值的方式有很多,本文整理了一些比较常用方法,大家可以根据自己需求自由选择...2021-09-22
- 这篇文章主要介绍了解决java main函数中的args数组传值问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-21
- 这篇文章主要给大家介绍了关于C语言中传值与传指针的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C语言具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-04-25
- .NET中利用js让子窗体向父页面传值的实现方法,需要的朋友可以参考一下...2021-09-22
Angular+Ionic使用queryParams实现跳转页传值的方法
这篇文章主要介绍了Angular+Ionic使用queryParams实现跳转页传值的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-05- Vue组件之间是有联系的,避免不了组件之间要互相传值,那么如何实现Vue两个同级组件传值,本文就来介绍一下,感兴趣的可以了解一下...2021-07-16
- 这篇文章主要介绍了ASP.NET通过更改Url进行页面传值的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22
- 本文主要介绍了jquery利用json实现页面之间传值的方法,具有很好的参考价值,需要的朋友可以看下...2017-01-09
- 这篇文章主要介绍了vue组件之间相互传值的方式,对vue感兴趣的同学,可以参考下...2021-05-12
- 面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值、存储对象传值、ajax、类、model、表单等。但是一般来说,常用的较简单有QueryString,Session,Cookies,Application,Server.Transfer。...2021-09-22
- 这篇文章介绍了asp.net后台关闭当前页面并传值的两种方法,有需要的朋友可以参考一下...2021-09-22
- C#开发windows应用程序项目时,不同窗口之间传值有很多中方法,在此给大家介绍两种比较常用的winform窗体传值的方法,有需要的朋友可以参考下...2020-06-25