vue3 父子传参

子传父，需要三个东西

1. 需要传递的值，比如

   const emitNum = ref(0);

2. 传递给父组件的方法

   const emit = defineEmits(["emitClick"]);

3.  子组件点击的方法

   const clickEmit = () => {
     emit("emitClick", emitNum.value);
   };

//父组件
<template>
  <HelloWorld @emitClick="getEmitText" msg="这是父传子" />
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";


//emitNum: number 必写，不然会接受不到子组件传递过来的值
const getEmitText = (emitNum: number) => {
  console.log("子传父", emitNum);
};
</script>


//子组件
<template>
  <h1>{{ msg }}</h1>
  <div @click="clickEmit" class="card">
      子组件点击
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

defineProps<{ msg: string }>();//接受父组件传递过来的参数


const emitNum = ref(0);

const emit = defineEmits(["emitClick"]);

const clickEmit = () => {
  emit("emitClick", emitNum.value);
};


</script>

在父组件接受的时候，一定要填写相关的字段，否则会接受到的参数会是undefined