vue3 props和emit 的使用

子组件案例:

<template>
    <div>
        <h1>{{user.name}}</h1>
        <h1>{{user.age}}</h1>
        <button @click="onchange">change</button>
    </div>
</template>
<script setup lang="ts">
import {defineProps,defineEmits} from 'vue'
interface IUser {
    name:string;
     age:number
}
interface IEvent {
    (e:'change',age:number):void;
} 
// 第一种
// const props=defineProps({
//     name:string
// })
// 第二种
const props=defineProps<{user:IUser}>()
//第一种方式
// const emits=defineEmits(['change'])
// 第二种方式   配合interface
const emits=defineEmits<IEvent>()
const onchange=()=>{
    emits('change',props.user.age)
}

</script>

父组件

<template>
    <div>
        {{hello}}
    </div>
    <div>
        {{count}}
    </div>
    <button @click="count++">点击</button>
    <mess :user="str" @change="clickChange"></mess>
</template>
<script lang="ts" setup>
    import mess from './components/mes.vue'
    import {ref} from 'vue'
    const hello = "hello"
    const count=ref(0)
    const str={
        name:'张三',
        age:234
    }

    const clickChange=(text:string)=>{
        console.log(text);
        
    }

</script>