vue3 - 19.Mitt兄弟组件传参传值

1.安装mitt：

npm install mitt -S

2.使用方法：

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'const Mit = mitt()//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {export interface ComponentCustomProperties {$Bus: typeof Mit}
}const app = createApp(App)//Vue3挂载全局API
app.config.globalProperties.$Bus = Mitapp.mount('#app')

子组件组件：A.vue == > 派发 $emit

<template><div>我是A组件<button @click="emit">emit</button></div>
</template>
<script setup lang='ts'>import {getCurrentInstance} from 'vue'const instance = getCurrentInstance()const emit = () => {instance?.proxy?.$Bus.emit('on-click','hello world')}
</script>
<style scoped>
</style>

子组件组件：B.vue == > 监听 $on

<template><div>我是B组件 ==> {{ getStr }}</div>
</template>
<script setup lang='ts'>import { ref } from 'vue'import { getCurrentInstance } from 'vue'const getStr = ref<unknown>('');const instance = getCurrentInstance()instance?.proxy?.$Bus.on('on-click', (str) => {console.log(str)getStr.value = str})
</script>
<style scoped>
</style>

父页面：

<template><div><A /><B /></div>
</template>
<script setup lang='ts'>import { ref } from 'vue'import A from './A.vue'import B from './B.vue'
</script>
<style scoped>
</style>

3.通过mitt传多条数据：

子组件组件：A.vue == > 派发多个

<template><div>我是A组件<button @click="emit">emit</button></div>
</template>
<script setup lang='ts'>import {getCurrentInstance} from 'vue'const instance = getCurrentInstance()const emit = () => {instance?.proxy?.$Bus.emit('on-click1','hello')instance?.proxy?.$Bus.emit('on-click2','world')}
</script>
<style scoped>
</style>

子组件组件：B.vue == > 监听多个 $on('*')

<template><div>我是B组件 ==> {{ getStr1 }} - {{getStr2}}</div>
</template>
<script setup lang='ts'>import { ref } from 'vue'import { getCurrentInstance } from 'vue'const getStr1 = ref<unknown>('');const getStr2 = ref<unknown>('');const instance = getCurrentInstance()instance?.proxy?.$Bus.on('*', (type,str) => {console.log(type,str)if(type == 'on-click1'){getStr1.value = str}if(type == 'on-click2'){getStr2.value = str}})
</script>
<style scoped>
</style>

父页面：

<template><div><A /><B /></div>
</template>
<script setup lang='ts'>import { ref } from 'vue'import A from './A.vue'import B from './B.vue'
</script>
<style scoped>
</style>

移除监听事件（off）

vue3 - 19.Mitt兄弟组件传参传值相关推荐

vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
【Vue3】第十四部分父子组件传参
[Vue3]第十四部分父子组件传参文章目录 [Vue3]第十四部分父子组件传参 14. 父子组件传参 14.1 父传子(props) 14.2 子传父(emit) 14.3 子传父(ref) 总 ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
vue3子组件给父组件传参
子组件传参: const emit = defineEmits(['自定义事件名字A']) // 给父组件传参 emit('自定义事件名字A',数据) 父组件接收参数: <子组件标签名 @自定义 ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...
【愚公系列】2022年10月微信小程序-优购电商项目-⾃定义组件传参
文章目录前言一.id和data-xxx传参二.导航传值三.父子组件传值前言组件传参是小程序中非常重要的一个功能,因为小程序大多都是组件形式存在的. 一.id和data-xxx传参 view ...
组件传参的终极版，事件车，父子传参的祖宗。
如果简单的组件传参父子,子父传参就够了,但是如果兄弟之间传参就比较麻烦了, 事件车. 最后的还可以关闭监听消息@click="$root.$off('msg1')
Vue-admin工作整理（四）：路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

vue3 - 19.Mitt兄弟组件传参传值

vue3 - 19.Mitt兄弟组件传参传值相关推荐

最新文章

热门文章