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>

盘点vue3的各种生命周期

如何在Vue3中使用watch监控一个对象的属性值

Vue3怎么运用pinia状态管理工具

Vue3中文官网介绍

vue3中axios如何封装拦截器配置请求

标签： mitt, vue3语法

上面是“vue3语法如何利用mitt实现兄弟组件传值”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4795.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！