Vue3的父传子、子传父

父组件：

<script setup lang="ts">
import { ref } from "vue";
import Child from "./components/Child.vue";
let num = ref(1);

// 子传父
const changeNum = (num1: number) => {
  num.value += num1;
};
</script>
<template>
  <Child :num="num" @changeNum="changeNum"></Child>
</template>

 

子组件：

<script setup lang="ts">
//defineProps<{ 声明父组件传子组件的数据 }>()
const props = defineProps<{
  num: number;
}>();
let num1 = 5;
// 在emit中设置 自定义事件及参数类型
const emit = defineEmits<{
  (event: "changeNum", num1: number): void;
}>();
// 触发事件时触发emit里面的自定义事件
const changeNum = () => {
  emit("changeNum", num1);
};
</script>
<template>
  <div>Child子组件------{{ num }}------{{ props.num }}</div>
  <div><button @click="changeNum">修改num</button></div>
</template>