vue3父子组件通信之emit

父组件代码

<template>
	<Test @doClick="fn">Test5>
template>

<script setup>
import Test from './components/Test.vue'

const fn = (infoData) => {
	// 判断子组件传递过来的数据类型
	if (isReactive(infoData)) {
		// 使用toRaw函数返回原始对象
		console.log(toRaw(infoData))
	} else if (isRef(infoData)) {
		console.log(infoData.value)
	} else {
		console.log(infoData)
	}
}
script>

<style lang="less" scoped>style>

子组件代码

<template>
	<div>
		<p>{{ num }}p>
		<button @click="clickHandle">butonbutton>
	div>
template>

<script setup>
const num = ref(0)
const person = {
	name: 'peter'
}
const info = reactive({
	name: 'tom',
	age: 22
})

const clickHandle = () => {
	// 触发自定义事件
	emit('doClick', num)
}
// 定义自定义事件
const emit = defineEmits(['doClick'])
script>