vue3 子组件怎么给父组件传数据
时间: 2024-09-21 14:02:42 浏览: 36
在Vue 3中,子组件向父组件传递数据通常有两种常见的方法:
1. **props** (属性):这是最直接的方式。子组件将数据作为props传递给父组件。父组件通过`:prop-name`这样的绑定语法接收数据。示例如下:
```html
<!-- 子组件 -->
<template>
<button @click="sendData">发送数据</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['parentData']);
function sendData() {
emit('parentData', '这是我从子组件传递的数据');
}
</script>
// 父组件
<ChildComponent @parentData="handleReceivedData" />
...
methods: {
handleReceivedData(data) {
console.log('收到子组件数据:', data);
},
}
```
2. **自定义事件 (Event Emitters)**:如果需要实时通信或者更复杂的数据流,可以使用自定义事件。子组件触发一个事件,并在事件对象中携带数据,父组件通过v-on指令监听该事件。示例:
```html
<!-- 子组件 -->
<template>
<button @click="$emit('customEvent', 'dataFromChild')">
</template>
<script setup>
import { $emit } from 'vue';
function sendData() {
$emit('customEvent', '这是我的数据');
}
</script>
// 父组件
<ChildComponent @customEvent="handleCustomData" />
...
methods: {
handleCustomData(data) {
console.log('收到自定义事件:', data);
},
}
```
以上两种方法都可以实现子组件向父组件的数据传递,选择哪种取决于具体的需求和应用场景。