VueJs 2

Access child component data from parent without emit in Vue

Jul 3, 2022 7 Mins read

Normal to get the data from child component to parent component we use $emit an event to emit the event with data or use two-way binding to emit data to prop directly. But in this case, to make it simple we can decare a ref to child component with any ref name and we call to $refs data property.

ParentComponent.vue

Users who click on the "Get child data" button will log the ChildComponent name to the console

<template>
  <div>
    <h3>Parent Component</h3>
    <button @click="getNameFromChild">Get child data</button>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
export default {
  methods: {
    getNameFromChild() {
      console.log('child name: ', this.$refs.child.name);
    }
  },
  components: {
    ChildComponent: () => import('./ChildComponent')
  }
}
</script>

ChildComponent.vue

<template>
  <div>
    <h4>Child Component</h4>
    <p style="color: red">{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vorleak'
    }
  }
}
</script>