#yyds干货盘点#vue3 语法糖setup 兄弟组件传值

使用 mitt

// 全局引入
npm install mitt
或者
cnpm install mitt

在main文件中挂载

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 借助imtt 通过emit传值

<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>

组件2

<script setup>
import { defineComponent,ref,reactive,getCurrentInstance } from 'vue'

let { proxy } = getCurrentInstance()
    // 拿到info，获取info内部的值
    proxy.$mitt.on('info', (res) => {
        console.log(res)
        // 打印 100
    })
</script>