组合式api-子父组件之间通信props和emit

整体来说和vue2也是比较相似的。

使用props传递数据到子组件

• 父组件给定数据。
• 子组件中使用defineProps来接收父组件传递的数据。

子组件emit触发事件通知父组件

思想和vue2完全一致.....

父组件：

<script setup>
import SonA from "@/compon/SonA.vue";
import {ref} from "vue";

const money = ref(100)
const handlerMoneyLost = (num) => {
  money.value-=num
}
</script>

<template>
  <div>
    我是父组件， money：{{ money }}
    <!-- 3. 父组件中定义相同的事件名，并指定事件处理函数 -->
    <SonA :money="money" @moneyLost="handlerMoneyLost"/>
  </div>
</template>

<style lang="less" scoped>
</style>

子组件：

<script setup>
const props = defineProps(['money']);
// 1. 使用defineEmits来定义emit，传递父组件中相同的事件名数组
const emits = defineEmits(['moneyLost']);
const useMoney = (num) => {
  // 2. 调用步骤1定义emits，并指定触发的事件名，还可以向事件传递参数。
  emits('moneyLost', num)
}
</script>

<template>
  <div class="SonA">
    <!-- 模板渲染中，不需要用props.money, 直接用money就可以了 -->
    我是SonA, 爸爸的钱：{{ money }}
    <button @click="useMoney(10)">花钱-10</button>
  </div>
</template>

<style scoped>
.SonA {
  border: 1px solid #000;
  padding: 30px;
}
</style>