1. Vue3.0中defineProps, defineEmits 使用

测试Vue 3.0总子组件与父组件交互的方法，作用和 Vue 2.0的props/$emit 类似

// Parent.vue
<script setup lang="ts">
import ChildrenCom from "@/components/ChildCom.vue"
import { reactive } from "vue";
const data = reactive({ num: 0 })
const onAdd = (param: number) => {
  data.num = data.num + (param || 1)
}
</script>

<template>
  <main>
    <!-- props 传参数 与 emit 方法绑定 -->
    <ChildrenCom :num="data.num" @add="onAdd" />
  </main>
</template>

// Child.vue
<script lang="ts">
// 使用 setup 时，指定组件名称的方法
export default {
    name: 'children-component',
    // inheritAttrs: false,
    // customOptions: {}
}
</script>

<script setup lang="ts">
const props = defineProps({ num: { type: Number, required: true } })
const emits = defineEmits<{ (e: 'add', num: number): void }>()
const updateNumber = () => emits('add', props.num)
</script>

<template>
    <h2>{{ props.num }}</h2>
    <button @click="updateNumber">Fire</button>
</template>