vue3父子组件传值

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>