子传父,需要三个东西
- 需要传递的值,比如
const emitNum = ref(0);
- 传递给父组件的方法
const emit = defineEmits(["emitClick"]);
- 子组件点击的方法
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