vue3中组件传递消息

嗨！我是浮生code，一个努力向上爬的蜗牛程序员。通过自己的经验，这期分享一下vue3中的传递方式，解决有些从vue2转vue3的人，会遇到的组件传递消息的一些问题，

第一种父向子-传值(props)

//子组件中
<script setup>
const props = defineProps({
    name:{
        type: String,
        default: ''
    },
})
</script>

<template>

<child  :name="name"/>
</template>

//父组件中传值
<script setup>
import child from '@/component/child.vue'
let name = ref('嗨,我是浮生code')
</script>

第二种父调用子 方法 (ref)

//子组件
<template>
    <div @click='toDo'>点击</div>
</template>

<script setup>
const emit = defineEmits(["doSome"])

function toDo() {
    emit('doSome','嗨,我是浮生code')
}
</script>


//父组件
<template>
    <child @doSome="doSome"/>
</template>

<script setup>
import child from '@/component/child.vue'

function doSome(e) {
    console.log(e) //拿到数据   嗨,我是浮生code
}

</script>

第三种 爷孙传递消息(只能由顶层传递到下层)(provide、inject)

注意：如果需要改变数据建议使用 ref()，因为小编在使用时reactive()，修改的数据时，子组件没有变化

//父组件
<template>
    <div @click="change"></div>
    <son/>
</template>
<script setup>
    import son from '@/components/son';
    let content = ref('你好')
    provide('content',content)

    function change(){
        content.value = '你好,我是浮生code'
    }
</script>


//子组件
<template>
    <grandson/>
</template>
<script setup>
    import grandson from '@/components/grandson';
</script>


//孙子组件
<template>
    <div>{{ content }}</div>
</template>
<script setup>
    let content= inject('content')
</script>

第四种 兄弟组件(mitt)

第四种方式类似于vue2中的bus,但vue3中已经没有了，也可以自己写，也可以调用vue3中的第三方的东西，小编推荐调用第三方来传递消息。

第一步：安装mitt

npm install --save mitt 

第二步：创建js文件,引入mitt(例如：bus.js)

import mitt from 'mitt'
const bus = mitt()
export default bus

第三步调用
 

//兄弟组件1
<template>
    <div @click='toInfos'></div>
</template>
<script setup>
import bus from "../bus.js";

function toInfos() {
  bus.emit('infos','给兄弟2的消息')
}
</script>

//兄弟组件2
<template>
    <div></div>
</template>
<script setup>
import bus from "../bus.js";
bus.on("infos",(e)=>{
    console.log(e) //拿到数据  给兄弟2的消息
})
</script>