Vue3.2+TS的父传子，子传父

这是父组件

<template>
  <div>
    <!-- 这个fn是子组件emit触发名，两边保持一致 -->
    <Child :num="num" @fn="numUp"></Child>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Child from './views/child.vue'

let num = ref(10)

const numUp = (childnum:number)=>{
  num.value+=childnum
}


</script>
<style scoped lang="less">


</style>

这是子组件

<template>
  <div>
    <h1>app传过来的数据为{{num}}</h1>
    <button @click="send">子传父</button>
  </div>
</template>

<script setup lang="ts">
//接受父组件传递过来的信息
defineProps({
  num:{
    type:Number,
    default:100
  }
})
//ts的emit写法，需要参数就直接加 返回值为空
const emit = defineEmits<{
  (event:'fn',childnum:number):void
}>()
//点击触发fn，父组件执行函数，并传递参数5
const send = ()=>{
  emit('fn',5)
}

</script>
<style scoped lang="less">
</style>