vue 父组件获取子组件所有数据

要在Vue的父组件中获取子组件的数据，你可以通过以下几种方式实现：

1. 使用 `ref` 引用子组件并直接访问其数据：在父组件中，使用 `ref` 属性给子组件命名，然后通过该引用来访问子组件的数据。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData() {
      const childData = this.$refs.child.childData;
      console.log(childData);
    }
  }
}
</script>

在上面的示例中，我们通过 `ref` 属性将子组件命名为 "child"，然后在 `getChildData` 方法中通过 `this.$refs.child` 来访问子组件实例，并获取其 `childData` 数据。

2. 使用自定义事件：在子组件中，通过 `$emit` 方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件通过监听该自定义事件来获取子组件的数据。例如：

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendData">发送数据给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: '子组件数据'
    }
  },
  methods: {
    sendData() {
      this.$emit('childData', this.childData);
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component @childData="getChildData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData(childData) {
      console.log(childData);
    }
  }
}
</script>

在上面的示例中，子组件通过 `$emit` 方法触发了一个名为 "childData" 的自定义事件，并将 `childData` 数据作为参数传递给父组件。父组件通过 `@childData` 监听该自定义事件，并在 `getChildData` 方法中获取子组件传递过来的数据。

这些是获取子组件数据的常用方法，你可以根据自己的需求选择合适的方式来实现。