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组件传值

巴特西

vue3 语法糖setup 兄弟组件传值

最新文章

热门文章