Vue3的Props与Emit一目了然，直观使用

props

父页面

father

<script>
improt son from './son'
const count = ref<number><0>;
function addCount() {
	count.value = count.value++
}
</script>
<template>
<son :count="count" :addCount="addCount"/>
<div>
<div>
</template>

子页面

son
<script lang='ts' setup>
const props = defineProps<{
	count:number;
	addCount:()=>viod
}>

</script>
<template>
<div>
{{ count }}
<button @click="addCount">增加</button>
<div>
</template>

emit

父页面

father

<script>
improt son from './son'
const count = ref<number><0>;
function addCount() {
	count.value = count.value++
}
</script>
<template>
<son  :addCount="addCount"/>
<div>
<div>
</template>

子页面

son
<script lang='ts' setup>
const props = defineProps<{
	count:number;
}>
// 定义
const emit = defineEmits<{
	(event:"addCount"):void;
}>

</script>
<template>
<div>
{{ count }}
// 引用
<button @click="emit("addCount")">增加</button>
<div>
</template>

有问题欢迎大家指教，谢谢~