VueJS access child component's data from parent

In Vue.js, although the primary data flow is designed top-down (i.e., from parent to child components), there are cases where accessing child component data or methods from the parent is necessary. To achieve this, Vue provides several approaches.

1. Using the ref Attribute

ref is a highly useful feature in Vue that registers reference information for elements or child components. After registration, the entire component instance can be accessed via this.$refs. This is a straightforward method to access child component data, computed properties, or methods.

Example Code:

html
<template>
  <div>
    <ChildComponent ref="child"/>
    <button @click="accessChild">Access Child Component</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
  components: {
    ChildComponent
  },
  methods: {
    accessChild() {
      // Accessing child component instance via $refs
      console.log(this.$refs.child.someData);
    }
  }
}
</script>

In this example, we create a reference to the child component using ref="child" on ChildComponent. Then, we access the child component via this.$refs.child, including its data, computed properties, and methods.

2. Using Events

When child component data changes that the parent needs to know about, events can be used. Child components trigger events using $emit and pass data directly to the parent.

Example Code:

html
<template>
  <div>
    <ChildComponent @childUpdated="handleChildUpdate"/>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildUpdate(data) {
      console.log("Child component updated data:", data);
    }
  }
}
</script>

In this example, when the child component triggers the childUpdated event, the parent's handleChildUpdate method is invoked and receives the data passed from the child component.

3. Using the .sync Modifier (Vue 2.3+)

Vue 2.3 introduced the .sync modifier, enabling the parent component to conveniently bind to a child component property in a two-way manner.

html
<template>
  <div>
    <ChildComponent :some-prop.sync="parentData" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
  data() {
    return {
      parentData: 'initial value'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

In this example, the parentData property is bound to the child component's some-prop property using the .sync modifier. Any updates on either side are synchronized to the other.

These are several common methods for accessing or influencing child component data from the parent. In practical applications, it is advisable to maintain a unidirectional data flow to minimize component coupling and enhance code maintainability.