vue3 父子传参

最新推荐文章于 2025-10-27 20:37:29 发布

最新推荐文章于 2025-10-27 20:37:29 发布 · 378 阅读

文章标签：

本文详细介绍了Vue.js中父子组件如何进行通信，包括子组件如何通过定义自定义事件将值传递给父组件，以及父组件如何接收并处理这些传递的值。通过具体的代码示例展示了`emit`和`defineEmits`的使用方法，强调了在父组件接收子组件传递的值时，必须正确声明接收参数的重要性。

子传父，需要三个东西

需要传递的值，比如
```
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