vue3 在＜script setup＞中父子组件的传值

子组件向父组件传递数据

在Vue 3中，使用<script setup>语法时，子组件向父组件传递数据通常涉及到两个步骤：首先，在子组件中定义要传递的数据和事件；其次，在父组件中通过定义的事件监听器接收这些数据。

子组件ChildComponent.vue

<script setup>
import { defineEmits, defineProps } from 'vue';

// 定义props
const props = defineProps({
 someProp: String
});

// 定义要触发的事件
const emit = defineEmits(['updateParent']);

// 子组件的方法，用于触发事件并传递数据
function updateParentValue() {
 emit('updateParent', newValue);
}
</script>

父组件parent.vue

<script setup>
import ChildComponent from './ChildComponent.vue';

// 定义接收数据的响应式引用
const childData = ref('');

// 处理子组件发出的事件，更新父组件的状态
const handleUpdateParent = (newValue) => {
 childData.value = newValue;
};
</script>

<!-- 父组件模板 -->
<ChildComponent :someProp="childData" @updateParent="handleUpdateParent"></ChildComponent>