vue3兄弟组件传参

兄弟组件传参数

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>