VUE父子之间的传值（以vue3为例）

在Vue 3中，父子组件之间的传值可以通过props进行父->子的传值，通过自定义事件进行子->父的传值。

父组件传值给子组件：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :parentData="parentData" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('父组件数据');
</script>

子组件接收父组件的值并传值给父组件：

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>来自父组件的数据: {{ parentData }}</p>
    <button @click="sendDataToParent">传递数据给父组件</button>
  </div>
</template>
 
<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['updateData']);
const props = defineProps({
  parentData: String
});
 
const sendDataToParent = () => {
  const childData = '子组件数据';
  emit('updateData', childData);
};
</script>

父组件接收子组件的值：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @updateData="handleDataFromChild" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const handleDataFromChild = (data) => {
  console.log('来自子组件的数据:', data);
};
</script>

以上代码展示了父组件如何通过props给子组件传递数据，子组件如何通过自定义事件发送数据给父组件。在子组件中，我们定义了一个sendDataToParent函数，当按钮被点击时，该函数会被调用，并通过emit函数发送数据给父组件。父组件通过监听updateData事件来接收数据。