海淀网站建设,wordpress安装无法连接数据库连接,网络游戏推广员是做什么的,网站官网上的新闻列表怎么做【Vue3】组件通信之mitt 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗的日… 【Vue3】组件通信之mitt 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用 mitt 实现任意组件间传数据。
Vue3 推荐使用 Mitt 作为事件总线EventBus实现平行组件间传数据。
Vue3 中组件间通信包括
父组件向子组件传数据实现方案有 propsv-model$ref默认插槽 / 具名插槽 子组件向父组件传数据 propsv-model$parent自定义事件作用域插槽 父组件向子组件的子组件传数据即向孙子组件传数据 $attrsprovider inject 任意组件间传数据 mittPinia
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual Studio Code1.91.1
开发步骤及源码
1 创建 Vue3 工程参考【Vue3】工程创建及目录说明。
2 执行 npm i mitt 命令安装 mitt。
PS D:\... npm i mittadded 1 package in 1s10 packages are looking for fundingrun npm fund for details3 在 src 下新建 tools / utils 工具文件夹在其中新建 emitter.ts。
// 引入mitt
import mitt from mitt
// 调用mitt得到emitteremitter可以订阅事件及发布事件
const emitter mitt()
// 暴露emitter
export default emitter4 修改 src 目录下 main.ts引入 emitter。
import { createApp } from vue
import App from ./App.vue
import emitter from ./tools/emittercreateApp(App).mount(#app)5 删除 src 目录下 assets 和 components 目录中内容。
6 在 src/components 新建订阅事件的组件。
templatediv classmediah2Breaking News/h2ulli v-foritem in news :keyitem.time{{ item.time }} : {{ item.title }}/li/ul/div
/templatescript setup langts
import { onUnmounted, reactive } from vue
import emitter from /tools/emitterconst news reactiveany([])emitter.on(news, (value) {news.push(value)
})// 组件卸载时需要主动解绑事件
onUnmounted(() {emitter.off(news)
})
/scriptstyle scoped langscss
.media {background-color: coral;height: 600px;padding: 10px;
}
/style注意需要执行 npm install -D sass 命令安装 CSS 预处理器。
7 在 src/components 新建发布事件的组件。
templatediv classreporterh2Reporter/h2button clickreport报道新闻/button/div
/templatescript setup langts
import emitter from /tools/emitterfunction report() {emitter.emit(news, {title: Breaking news...,time: getDateTime(),})
}function getDateTime() {const dateTime new Date()return dateTime.getFullYear() / (dateTime.getMonth() 1) / dateTime.getDate() dateTime.getHours() : dateTime.getMinutes() : dateTime.getSeconds()
}
/scriptstyle scoped langscss
.reporter {background-color: darkcyan;padding: 10px;button {font-size: 18px;font-weight: bold;height: 30px;width: 120px;}
}
/style8 修改 Vue 根组件 src/App.vue 作为最顶层组件引入以上两个组件。
templatediv classcontentdiv classcomponentMedia //divdiv classcomponentReporter //div/div
/templatescript setup langts
import Media from ./components/Media.vue
import Reporter from ./components/Reporter.vue
/scriptstyle scoped langscss
.content {background-color: darkgray;padding: 20px;display: flex;.component {width: 500px;margin-right: 30px;}
}
/style9 执行命令 npm run dev 启动应用浏览器访问http://localhost:5173/每点击一次 Reporter 组件中的 报道新闻 按钮Media 组件便会接收并显示。
总结
Mitt 是一个事件总线EventBus可用于平行组件间传数据接收数据方使用 emitter.on 方法订阅事件待事件发生时接收对应数据接收数据方在卸载时需要主动调用 emitter.off 方法取消事件订阅发送数据方使用 emitter.emit 方法发布事件。
