vue3学习笔记（兄弟组件传参）

🐱 个人主页：不叫猫先生
🙋‍♂️ 作者简介：2022年度博客之星前端领域TOP 2，前端领域优质作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
💫优质专栏：vue3 + vite + TypeScript 从入门到实践
📢 资料领取：前端进阶资料可以找我免费领取
🔥 摸鱼学习交流：我们的宗旨是在工作中摸鱼，摸鱼中进步，期待大佬一起来摸鱼(文末有我wx或者私信)。

兄弟组件传参数

mitt使用方式和vue2的事件大巴类似。

• 安装

npm i mitt -S

• 新建plugin/Bus.js

import mitt from 'mitt '
cosnt emitter = mitt()
export default emitter

• Home.vue

<templete>
<A />
<B />
<templete>
<script setup>
import A from '../components/A.vue'
import B from '../components/B.vue'
</script>

• A.vue

<template>
	<div>
		<h1>A组件</h1>
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import mitter from '/plugin/Bus.js '
const str = ref('A组件的数据');
const btn = ()=>{
  mitter.emit('fn',str)
}

</script>

• B.vue

<template>
	<div>
		<h1>B组件</h1>
		<div><{{variable}}/div>
	</div>
</template>
<script setup>
import mitter from '/plugin/Bus.js '
const variable = ref('')
onBeforeMount(()=>{
   const mitter.on('fn',res=>{
       variable.value = res.value;
   })
})

</script>