Vue3 setup tsx 子组件向父组件传值 emit

需求：Vue3 setup 父组件向子组件传值，子组件接收父组件传入的值；子组件向父组件传值，父组件接收的子组件传递的值。

父组件：parent.tsx：

import { defineComponent, ref, reactive } from 'vue';
import TotalPreview from './components/TotalPreview'export default defineComponent({name: 'parent',components: { TotalPreview },setup() {const count = ref(123);const childNum = reactive({ num: 1 });const onChildClick = (val: any) => {childNum.num = val;console.log('childNum',childNum); // 打印子组件向父组件传递的值};return () => (<><div><h1>父组件接收的子组件传递的值：{childNum.num}</h1><TotalPreview num={count.value} onNumClick={onChildClick} /></div></>);},
});

子组件：TotalPreview.tsx：

import { defineComponent, ref } from 'vue';
import { Button } from 'ant-design-vue';export default defineComponent({name: 'Child',props: { num: Number },emits: ["numClick"],setup(props, { emit }) {const parentNum = ref(props.num)const count = ref(1);const onclick = () => {count.value++// emit 子组件向父组件传值emit('numClick', count.value);}return () => (<div><h1>{'父组件传递给子组件的值：'+parentNum.value}</h1><h1>{'子组件显示count值：'+count.value}</h1><Button onClick={onclick}>点击按钮改变子组件的值，并向父组件传值</Button></div>);},
});