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>
有问题欢迎大家指教，谢谢~文章来源地址https://www.toymoban.com/news/detail-702985.html
文章来源：https://www.toymoban.com/news/detail-702985.html
到了这里，关于Vue3的Props与Emit一目了然，直观使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
