这是父组件
<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
}
})
const emit = defineEmits<{
(event:'fn',childnum:number):void
}>()
const send = ()=>{
emit('fn',5)
}
</script>
<style scoped lang="less">
</style>