Vue3和Vue2的组件通信

Vue3 组件通信方式
props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
mitt

Vue3 通信使用写法:

1. props
   用 props 传数据给子组件有两种方法，如下

// Parent.vue 传送
<child :msg2="msg2"></child>
<script setup>
    import child from "./child.vue"
    import {
    ref, reactive } from "vue"
    const msg2 = ref("这是传给子组件的信息2")
    // 或者复杂类型
    const msg2 = reactive(["这是传级子组件的信息2"])
</script>

// Child.vue 接收
<script setup>
    // 不需要引入 直接使用
    // import { defineProps } from "vue"
    const props = defineProps({
   
        // 写法一
        msg2: String
        // 写法二
        msg2:{
   
            type:String,
            default:""
        }
    })
    console.log(props) // { msg2:"这是传级子组件的信息2" }
</script>

2. $emit

// Child.vue 派发
<template>
    // 写法一
    <button @click="emit('myClick')">按钮</buttom>
    // 写法二
    <button @click="handleClick">按钮</buttom>
</template>
<script setup>
    
    // 适用于Vue3.2版本 不需要引入
    // import { defineEmits } from "vue"
    // 对应写法一
    const emit = defineEmits(["myClick","myClick2"])
    // 对应写法二
    const handleClick = ()=>{
   
        emit("myClick", "这是发送给父组件的信息")
    }
</script>

// Parent.vue 响应
<template>
    <child @myClick="onMyClick"></child>
</template>
<script setup>
    import child from "./child.vue"
    const onMyClick = (msg) => {
   
        console.log(msg) // 这是父组件收到的信息
    }
</script>

3. expose / ref
   父组件获取子组件的属性或者调用子组件方法

// Child.vue
<script setup>
    // 适用于Vue3.2版本, 不需要引入
    // import { defineExpose } from "vue"
    defineExpose({
   
        childName: "这是子组件的属性",
        someMethod(){
   
            console.log("这是子组件的方法")
        }
    })
</script>

// Parent.vue  注意 ref="comp"
<template>
    <child ref="comp"></child>
    <button @click="handlerClick">按钮</button>
</template>
<script setup>
    import child from "./child.vue"
    import {
    ref } from "vue"
    const comp = ref(null)
    const handlerClick = () => {
   
        console.log(comp.value.childName) // 获取子组件对外暴露的属性
        comp.value.someMethod() // 调用子组件对外暴露的方法
    }
</script>

4. attrs
   attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合

// Parent.vue 传送
<child :msg1="msg1" :msg2="msg2" title="3333"></child>
<script setup>
    import child from "./child.vue"
    import {
    ref, reactive } from "vue"
    const msg1 = ref("1111")
    const msg2 = ref("2222")
</script>

// Child.vue 接收
<script setup>
    import {
    defineProps, useAttrs } from "vue"
    // 3.2版本不需要引入 defineProps，直接用
    const props = defineProps({
   
        msg1: String
    })
    // 适用于 Vue3.2版本
    const attrs = useAttrs()
    console.log(attrs