vue3中父子组件传值

子组件：AppChild.vue

<template>
<!-- 子组件 -->
    <p>{{num}}</p>
    <button @click="hdClick">按钮</button>
</template>

<script lang='ts' setup>
import { defineProps,defineEmits } from 'vue'
    defineProps({
    // num是父组件等号左边的num
        num:{
            type:Number,
            default:30
        }
    })

    // 子传父的时候需要先定义好emit这个方法
    const emit = defineEmits<{
        (event: 'fn'): void
    }>()

    const hdClick = ()=>{
      // 不需要$emit
        emit("fn")
    }
</script>
 
<style lang = "less" scoped>
  
</style>

父组件：

<!-- 父组件 -->
    <Child :num="num" @fn="chanNum"></Child>
</template>

<script lang='ts' setup>
// 组件只需要引入就可以使用
import Child from "./AppChild.vue"
import { ref } from 'vue'
let num = ref(20);
const chanNum = ()=>{
  num.value++
}
</script>
 
<style lang = "less" scoped>
  
</style>

显示：