vue3中父子组件通信

<!-- 父组件 -->
<child-component ref="myChild" :count="countNum" @add="handleClick "></child-component>

/* 父组件 */
<script>
import ChildComponent from './ChildComponent.vue'
imort {  reactive, toRefs } from 'vue'
export default {
	compontens: {
		ChildComponent 
	},
	setup() {
		const state = reactive({ countNum: 1 })
		const handleClick = (num) => {
			state.countNum += num
		}
		const add = () => {
			state.countNum += 1
		}
		const myChild= ref()  // myChild是页面ref后面对应的名字
	    const clickChildCom = () => {
	      myChild.value.changeText() // 调用子组件的方法
	    }
	    
		return {
			 ...toRefs(state),
			 handleClick,
			 add,
			 clickChildCom  
		}
	}
}
</script>  

<!-- 子组件 -->
<template>
	<div>父组件传过来的值：{{ count }}</div>
	<el-button @click="changeCount "></el-button>
</template>

/* 子组件 */
<script>
	export default {
		props: {
	    	count: Number
	  	},
		setup(props, ctx) {
			const text= ref("子组件"); 
		    const changeText = () =>{
		      text.value = "改变子组件";
		    }

			const changeCount = () => {
				ctx.emit('add', 2) // 子组件调用父组件的方法
			}
			return {
				changeCount,
				text,
				changeText  
			}
		}
	}
</script>