vue3中事件总线mitt(第三方库mitt)

这篇具有很好参考价值的文章主要介绍了vue3中事件总线mitt(第三方库mitt)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.安装mitt:npm install mitt -save

mitt vue,vue,css,vue.js,javascript,前端,html

2. 新建EventBus.js文件:

// 事件总线第三方库:
import mitt from 'mitt';
const bus = mitt();
export default bus;

3.发出事件的页面:bb.vue

<template>
    <div class="box">
        <h2>小b页面视图</h2>
        <button @click="sendData">局部事件总线:点击之后给cc页面传递一个值</button>
    </div>
    
</template>

<script setup>
import bus from "../utils/EventBus"
// import {ref} from "vue"
const sendData = () => {
    bus.emit("data",18)
}
</script>

<style>
    .box{
        text-align: left;
    }
</style

4.接收事件的页面:dd.vue

<template>
    <div>
        <h2>小d页面视图</h2>
    </div>
</template>

<script setup>
import bus from "../utils/EventBus"
import { ref ,onMounted} from "vue";
onMounted(()=>{
    bus.on("data",(info)=>{
        console.log("dd页面接收到的值:",info)
    })
})

</script>

5.点击bb页面按钮:

mitt vue,vue,css,vue.js,javascript,前端,html文章来源地址https://www.toymoban.com/news/detail-629422.html

到了这里,关于vue3中事件总线mitt(第三方库mitt)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3引用第三方模块报错Could not find a declaration file for module ***.

    在引用第三方的组件时候报错如下 原因是:该组件可能 不是.ts文件而是.js文件 解决方案: 1.在Src的目录下面新建一个文件为 shims-vue.d.ts 的文件 2.文件内容为  declare module \\\'xxx\\\',xxx就是你报错的模块 例如我这样

    2024年02月22日
    浏览(76)
  • LiveMedia视频中间件如何与第三方系统实现事件录像关联

            LiveMedia视频中间件是支持部署到本地服务器或者云服务器的纯软件服务,也提供服务器、GPU一体机全包服务,提供视频设备管理、无插件、跨平台的实时视频、历史回放、语音对讲、设备控制等基础功能,支持视频协议有 海康、大华私有协议、宇视私有协议、天地伟

    2024年02月07日
    浏览(48)
  • day5:Node.js 第三方库

    使用 Express.js 构建 Web 应用 Express框架是Node.js生态系统中的一种流行的Web应用程序框架。其核心功能主要包括以下几个方面: 路由 :Express提供了一种方便的方式来定义路由,使得开发人员可以基于不同的HTTP方法(如GET、POST等)和URL来定义处理请求的函数。 中间件 :这是

    2024年02月07日
    浏览(46)
  • Vue第三方组件使用

    1、父组件与孩子组件传值 在孩子组件中定义props属性,里面定义好用于接收父亲数据的变量。 孩子组件是Movie Movie.vue。注意看在Movie组件里面有props对象中的title和rating属性用于父亲使用。 在父亲组件中使用孩子组件,使用时传入参数。 比如我在App.vue里面使用孩子组件时如

    2024年04月10日
    浏览(92)
  • vue中第三方库nprogress使用

    npm i nprogress@0.2.0 说明:用于请求拦截器,响应拦截器,start进度条开始,done进度条结束 说明:放入请求拦截器里面。 说明:放入响应拦截器里面。 

    2024年02月14日
    浏览(56)
  • cool 中的node.js 实现一个处理第三方Api 数据的处理

    1.需求     你现在是一个后端 前端跟你要一个接口 ,但是你发现 你这个接口 除了调用第三方Api的接口 有的数据还是没有 你直接返回 前端使用不了 因为都没有关于那样的数据 但是三方Api 中有其他的接口和现在的接口 经过处理 是可以实现这个前端需要的数据。遇到这样的

    2024年01月19日
    浏览(46)
  • vue使用第三方库lodash的节流函数

    说明:创建vue项目安装了lodash import throttle from \\\"lodash/throttle\\\";

    2024年02月14日
    浏览(64)
  • pc端web网站使用第三方微信登录流程(web、js)

    网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 网站接入准备工作 微信开放平台注册开发者账号,点击查看操作指引; 微信开放平台-管理中心-创建网站应用并通过审核; 通过审核后可以获得相应的AppID和AppSecret; 应用申请微信登录且通过审核后,

    2024年03月25日
    浏览(50)
  • 关于使用C#调用Win32API,抓取第三方句柄,模拟鼠标点击,键盘发送事件(C2Prog.exe)

    因为最近工作需要用就把基本知识整理了一下 主要操作这个软件写程序和选配置   下面例子和Win32以及自己封装的库全在工程文件里面 2023.7.10 :以前写的代码丢了重新写了一下优化了不少 ,所以特此更新一下 以前是1.7的版本目前用的是1.9版本有些不一样需要注意  这里放最新

    2024年02月14日
    浏览(52)
  • 031-安全开发-JS应用&WebPack打包器&第三方库JQuery&安装使用&安全检测

    1、三方库-JQuery-使用安全 2、打包器-WebPack-使用安全 演示案例: ➢打包器-WebPack-使用安全 ➢第三方库-JQuery-使用安全 创建WebPack,并创建目录src在目录下创建1.js 2.js 1.js 2.js 在创建index.html 由于js相互依赖的顺序不同,造成无法执行 ; 使用 Webpack 的主要原因: 模块化支持 :

    2024年02月22日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包