vue父组件获取子组件数据详解

一、使用ref获取子组件实例

在vue中，可以使用ref属性来获取子组件实例，在父组件中访问子组件的数据和方法。具体过程如下：

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

<script>
import child from './child'

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

在上面的代码中，我们将子组件<child>加上ref="myChild"标签，父组件就可以使用this.$refs.myChild获取子组件对象，从而获取子组件的数据。

二、使用props传递数据

使用props来在父子组件间传递数据是最常见的方法之一。具体过程如下：

<template>
  <div>
    <child :child-data="parentData" />
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  data() {
    return {
      parentData: 'hello world'
    }
  }
}
</script>

上面的代码中，将父组件的parentData数据传递给子组件的child-data数据。在子组件中可以使用this.childData获取这个值。

三、使用$emit传递数据

父组件也可以使用$emit来触发子组件中的方法，在这个方法中，子组件可以传递数据给父组件。

<template>
  <div>
    <child @childDataEvent="handleChildData" />
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  methods: {
    handleChildData(childData) {
      console.log(childData)
    }
  }
}
</script>

上面的代码中，在子组件中使用this.$emit('childDataEvent', childData)来触发父组件的handleChildData方法，并传递了childData数据。在父组件中可以使用这个数据处理自己的逻辑。

四、使用provide和inject

在vue2.2.0版本中，提供了一个新的选项provide和注入inject。父组件可以通过provide来提供数据和方法，而子组件可以通过inject来注入这些数据和方法。具体过程如下：

<template>
  <div>
    <child />
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  provide: {
    parentData: 'hello world',
    parentMethod() {
      console.log('parent method')
    }
  }
}
</script>

上面的代码中，将parentData和parentMethod提供给child子组件。在子组件中，可以这样使用：

<template>
  <div>
    {{ parentData }}
  </div>
</template>

<script>
export default {
  inject: ['parentData']
}
</script>

使用inject: ['parentData']来将parentData注入到子组件中，并可以直接使用这个变量。

总结

以上是vue父组件获取子组件数据的几种方法，每种方法都有其使用场景和优劣。在实际开发中，应根据需求来选择合适的方法，以达到最佳效果。