Vue 获取子组件 data

Vue 获取子组件 data

在父组件中，通过 ref 给子组件添加一个引用。
使用 $refs 来访问子组件的实例。
通过访问子组件实例的属性来获取 data 数据。

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

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

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