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>
关于父子组件传值的内容请看另一篇:vue3语法糖+ts组件传值