vue3语法如何利用mitt实现兄弟组件传值

在vue3​开发中，如何利用mitt插件实现兄弟组件传值，下面web建站小编给大家简单介绍一下！

1、安装脚手架

npm install --save mitt

2、新建bus.ts文件

import mitt from "mitt";
const emiter = mitt();
export default emiter;

3、在home.vue组件中引入

<template>
  <div class="home-container">
    <p>这里是home组件</p>
    <button @click="sendMitt">$mitt发送数据</button>
    <About></About>
  </div>
</template>
 
<script lang="ts" setup>
import { ref } from 'vue';
import About from '../about/about.vue'
import emitter from '../../utils/bus'
 
const money = ref<number>(98);
 
const sendMitt = () => {
  emitter.emit('moneyEvent', money.value += 2);
}
</script>

4、在about.vue组件中引入并使用

<template>
  <div class="about-container">
    <p>这里是about组件</p>
    <p>接收到的数据：{{ amount }}</p>
  </div>
</template>
 
<script lang="ts" setup>
import { ref, onBeforeMount, onMounted } from 'vue';
import emitter from '../../utils/bus'
 
const amount = ref(0);
 
onMounted(() => {
  emitter.on('moneyEvent', (res: any) => {
    amount.value = res;
  });
})
 
onBeforeMount(() => {
  emitter.off('moneyEvent');
});
 
</script>

<style lang="less">
.about-container {
  background-color: #f0f0f0;
}
</style>