vue3父子组件传值

• 父组件

<template><div><h2>父组件</h2>我的存款: {{ money }}<child :money='money' @money="payMoney"></child></div>
</template><script setup lang='ts'>import {ref} from "vue";import child from './components/child.vue';// 这是我的存款let money = ref(1000000);// 我儿子给我的工资,我要为我儿子存起来const payMoney = (e)=>{money.value += e;}
</script><stype scoped>.box{width: 100%;height: 100em;background: skyblue;}
</stype>

• 子组件

<template><div class="box"><h2>子组件</h2>这是我爸爸的存款: {{ props.money }}<button @click="payMoney()">我每个月给爸爸10000块钱</button></div>
</template><script setup lang="ts">
// 接收一下我爸爸发给我的存款余额, 炫耀一下
let props = defineProps(['money'])// 存钱
const emit = defineEmits(['money'])
const payMoney = ()=>{emit('money',10000);
}
</script><stype scoped>.box{width: 100%;height: 100em;background: yellowgreen;}
</stype>