子组件案例:
<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>