vue3引入mitt（eventBus）

时间：2023-12-06 11:36:43浏览次数：32

标签：myEventBus closeVisit mitt vue3 组件 import eventBus

版本

"mitt": "^3.0.1"

1、npm install mitt

2、项目下创建文件夹eventBus 建 myEventBus.js

import mitt from 'mitt'
export default mitt()

3、组件里监听

组件A

import myEventBus from "../eventBus/myEventBus";

myEventBus.on('closeVisit',()=>{ // closeVisit 名称
// 逻辑
  closeOpen()
})

组件B

import myEventBus from "../eventBus/myEventBus";

myEventBus.emit('closeVisit')

标签：myEventBus,closeVisit,mitt,vue3,组件,import,eventBus
From： https://www.cnblogs.com/luckyShuang/p/17879112.html

vue3 之封装hooks
注意：使用Hooks来做的话，需要封装一个以use开头的函数，自定义Hooks有一个潜规则，就是要use开头一、相关链接①已经封装好可直接使用的：https://vueuse.org/core/useMounted/② 为什么要在Vue3中多使用Hooks？好处是啥？： https://zhua......
vue3引入pinia
1、npminstallpinia2、在项目目录建store文件夹创index.jsimport{createPinia,defineStore}from"pinia";constpinia=createPinia()pinia.state.valueconsttoken=defineStore('token',{state(){return{token:null}......
基于Vue3.3 + TS4 ，让我们自主打造比肩 ElementPlus 的优质组件库的一些经验总结
Vue.js作为一款流行的JavaScript框架，在前端开发中扮演着重要的角色。本文将分享在Vue3.3和TypeScript4的环境下，打造优质组件库的经验总结，并提供相关示例代码。一、创建项目并配置开发环境首先，我们需要创建一个新的Vue项目并配置好开发环境。具体步骤如下：使用VueCLI创建一个新的......
Vue3-Composition-API-学习笔记
01.Setup函数的体验App.vue<template><div><h2>当前计数：{{counter}}</h2><button@click="increment">+1</button><button@click="decrement">-1</button></div></template&g......
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
VueCLI安装和使用全局安装最新vue3npminstall@vue/cli-g升级VueCLI：如果是比较旧的版本，可以通过下面命令来升级npmupdate@vue/cli-g通过脚手架创建项目vuecreate01_product_demoVue3父子组件的通信父传子父组件<template><div><divclass="item"v-for="(item,in......
vue3使用虚拟化表格自定义表格并动态生成表头
elementPlus的虚拟化表格用的是lang=tsx,先安装cnpmi@vitejs/plugin-vue-jsx然后去vite.config.ts里加配置importvueJsxfrom'@vitejs/plugin-vue-jsx'plugins:[vue(),vueJsx(),]再去tsconfig.json中加东西//不要把compilerOptio......
[转]vue3+tsx开发语法详解
原文地址:vue3+tsx开发语法详解-知乎很多组件库都使用了TSX的方式开发，主要因为其灵活性比较高，TSX和SFC开发的优缺点就不介绍了，这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pnpminstall@vitejs/plugin-vue-jsx-D安装完之后在vite.config.ts进行插件使用，代码如下......
学习Vue3 第六章（认识Ref全家桶）
ref接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个 .value property，指向该内部值<template><div><button@click="changeMsg">change</button><div>{{message}}</div></div></template><......
Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina
项目代码同步至码云weiz-vue3-templatepina是vue3官方推荐的状态管理库，由Vue核心团队维护，旨在替代vuex。pina的更多介绍，可从pina官网查看特点更简洁直接的API，提供组合式风格的API支持模块热更新和服务端渲染对TS支持更为友好安装npmipinia使用1.创建......
uniapp+vue3 优惠券样式
效果如图：template部分：<viewclass="item"><viewclass="box"><viewclass="content"><viewclass="head">优惠券</view><viewclass="content-box1">......

vue3引入mitt（eventBus）

相关文章

赞助商

阅读排行