Vue3基础之兄弟组件传值

简述

在做项目时，我们尽量会把各个功能进行模块化封装，父组件页面，只需要集成这个子模块即可，然而因业务需要，避免不了子组件直接进行通信数据交互等，下面我们通过mitt插件来实现子组件直接通信。
例如：父组件引用了A子组件和B子组件，A组件需要把值传递给B组件？

• 普通方式 A—>父—>B

  
  1686039913684.png
• mitt插件 A—>B

1. 安装mitt

npm install --save mitt

2. 引用mitt

• 为了避免每次都实例化mitt，我们创建文件夹plugins，并创建文件Bus.js

//bus.js
import mitt from 'mitt'
export default mitt()

• A组件传值

引用 import mitt from '../plugins/Bus'， mitt.emit() 发送

<template>
  <div> 
     <button @click="sendValueToB">传值B</button> 
  </div>
</template>
<script setup>
import mitt from '../plugins/Bus'
 import {ref} from 'vue'
  
 const sendValueToB = ()=>{
     mitt.emit('aTob',123)
 }
 
</script> 

• B组件接收

引用 import mitt from '../plugins/Bus'， mitt.on() 监听接收

<script setup>
 import {ref} from 'vue'
import mitt from '../plugins/Bus'
  const value = ref(0)
  mitt.on('aTob',e=>{
     value.value = e
  })
</script>