Vue3父子组件通信

子组件

<template>
    <h1 @click="childClick">{{ title }}</h1>
    <button @click="updateFunc">修改父组件传递的值</button>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose } from "vue"
defineProps({
    //定义子组件需要接收的值
    title: {
        type: String,
        default: ""
    }
})

//向父组件传递子组件的值和方法
defineExpose({
    childValue: "子组件的值",
    childFunc() {
        console.log("子组件的方法")
    }
})

// 注册事件
const emit = defineEmits(["myClick", "update:title"])

// 传给父组件的值
const childClick = () => {
    emit("myClick", "子组件通过事件传给父组件的参数")
}

//修改父组件传的值
const updateFunc = () => {
    emit("update:title", "子组件修改的新标题")
}

</script>

父组件

<template>
    <child v-model:title="title" @myClick="getChild" ref="childRef" />
</template>
<script setup>
import { ref, onMounted } from "vue"
import child from "@/components/child.vue"
//传给子组件的值
const title = ref("传给子组件的title")

//通过事件接收子组件传递的值
const getChild = (e) => {
    console.log(e)
}

// 获取子组件的值和方法
const childRef = ref(null)
onMounted(() => {
    console.log(childRef.value.childValue)
    childRef.value.childFunc()
})
</script>