我是靠谱客的博主 大气秋天,这篇文章主要介绍vue3.0的mitt使用,现在分享给大家,希望可以做个参考。

1.安装依赖

复制代码
1
2
npm install --save mitt

2.在main.ts或者main.js同级目录下建立一个bus.js文件

复制代码
1
2
3
4
5
6
7
8
9
import mitt from "mitt"; const bus = {}; const emitter = mitt(); bus.$on = emitter.on; bus.$off = emitter.off; bus.$emit = emitter.emit; export default bus

3.在需要用bus.js的组件中引用

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template> <div class="Parent" ref="Parent"> <el-button @click="EmitValue">EmitValue</el-button> </div> </template> <script lang="ts"> import { defineComponent, onMounted,reactive,provide,readonly,ref} from 'vue'; import bus from '@/bus' export default defineComponent({ name: 'Parent', components:{ }, setup(props,ctx){ //绑定的方法,第三方传值(任何组件的传值) const EmitValue=()=>{ bus.$emit("Deom","Deom") } }) return{ EmitValue } }, props: { }, }); </script>

4.在接收消息的组件中引用

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template> <div class="Other"> <p>{{name}}</p> </div> </template> <script lang="ts"> import { defineComponent,onMounted,reactive,inject,ref} from 'vue'; import bus from '@/bus' export default defineComponent({ name: 'Other', components:{ }, setup(props){ const name = ref(null) bus.$on('wode', (data) => { name.value = data console.log(data) }) onMounted(async () => { }) return{ name, } }, props: { }, }); </script>

最后

以上就是大气秋天最近收集整理的关于vue3.0的mitt使用的全部内容,更多相关vue3.0内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(110)

评论列表共有 0 条评论

立即
投稿
返回
顶部