示例：父组件传递100到子组件，子组件拿到之后显示出来，然后将值改为50，将在父组件中回显。最终结果如下图所示：
- Father.vue
<template>
<h2>父组件</h2>
{{ money }}
<hr>
<!-- 属性绑定：将值传递给子组件 -->
<!-- 绑定自定义事件，用来接收通知，接收到通知之后触发update_money方法-->
<Son :money="money" @chang_money="update_money"></Son>
</template>
<script>
import {ref} from 'vue'
import Son from "./Son.vue"
export default {
name: 'Father',
//注册子组件
components: {
Son
},
setup() {
let money = ref(100)
let update_money = (param) => {
console.log(param)
money.value = param
}
return {money, update_money}
}
}
</script>
- Sun.vu
<template>
<h2>子组件</h2>
从父组件中获取到的钱：{{ money }}
<br>
<button @click="xiaoFei">儿子花50</button>
<br>
子组件花费后剩下的钱： {{ qian }}
</template>
<script>
import {ref} from 'vue'
export default {
name: "Son",
//子组件使用props接收父组件的数据(直接使用)
props: {
money: {
type: Number,
default: 0
}
},
// 定义抛出的事件名称
emits: ['chang_money'],
setup(props, {emit}) {
//子组件通过props拿到父组件传递过来的数据（可进行处理）
let qian = ref(props.money)
const xiaoFei = () => {
//通知父组件，money变成了50
qian.value = qian.value - 50
emit('chang_money', qian.value)
}
return {qian, xiaoFei}
}
}
</script>
