vue3 子组件获取父组件的数据

在Vue3中，子组件可以通过props属性获取父组件传递的数据。以下是一个示例：

<template>
  <div>
    <p>父组件的数据：{{ parentData }}</p>
    <button @click="updateParentData">更新父组件数据</button>
  </div>
</template>

<script>
import { defineProps } from "vue";

export default {
  props: {
    parentData: {
      type: String,
      required: true
    }
  },
  methods: {
    updateParentData() {
      // 子组件操作父组件数据并传递给父组件
      const newData = "新的数据";
      this.$emit("update-parent-data", newData);
    }
  }
};
</script>

在父组件中，可以通过在子组件上使用v-bind指令将数据传递给子组件，并通过监听子组件的自定义事件来获取子组件传递的数据。以下是一个示例：

<template>
  <div>
    <p>子组件传递的数据：{{ childData }}</p>
    <ChildComponent :parentData="parentData" @update-parent-data="handleChildData" />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: "父组件的数据",
      childData: ""
    };
  },
  methods: {
    handleChildData(newData) {
      // 获取子组件传递的数据
      this.childData = newData;
    }
  }
};
</script>

在上述示例中，父组件通过v-bind指令将parentData传递给子组件，并通过监听子组件的update-parent-data事件来获取子组件传递的数据。