Vue3组件通信详解-CSDN博客

本文详细介绍了Vue3中实现组件间通信的各种方式，包括props、$emit、expose/ref、$attrs、v-model、provide/inject、Vuex以及mitt。通过实例展示了如何使用这些通信方法传递数据和触发事件，帮助开发者更好地理解和应用Vue3组件通信。

props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
mitt

1. props

用 props 传数据给子组件

Vue3 写法

// 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. $emi

// 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 = ()=>{
&n