vue3 语法糖setup 兄弟组件传值

// 全局引入
npm install mitt
或者
cnpm install mitt
• 1
• 2
• 3
• 4

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt' // 导入mitt
const app = createApp(App)
app.config.globalProperties.$mitt = new mitt() // mitt在vue3中挂载到全局
app.mount('#app')
• 1
• 2
• 3
• 4
• 5
• 6
• 7

<script setup>
import { defineComponent,ref,reactive,getCurrentInstance } from 'vue'
// 兄弟组件传值
let { proxy } = getCurrentInstance()
let brother = ref(100)
function sendBrotherData() {
        // 通过暴露info  传递 brother 的值
    proxy.$mitt.emit('info', brother.value)
}
</script>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

<script setup>
import { defineComponent,ref,reactive,getCurrentInstance } from 'vue'
let { proxy } = getCurrentInstance()
    // 拿到info，获取info内部的值
  proxy.$mitt.on('info', (res) => {
    console.log(res)
        // 打印 100
  })
</script>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10