How to access child component’s data from parent with Vue.js?

Sometimes, we want to access child component’s data from parent with Vue.js.

In this article, we’ll look at how to access child component’s data from parent with Vue.js.

How to access child component’s data from parent with Vue.js?

To access child component’s data from parent with Vue.js, we can assign a ref to the child component.

And then we can access the child component data as a property of the ref.

For instance, we write

<template>
  <markdown ref="markdown"></markdown>
</template>

<script>
export default {
  //...
  methods: {
    process() {
      const markdowns = this.$refs.markdown.items;
    },
  },
  //...
};
</script>

to assign the markdown ref to the markdown component.

Then we access the items reactive property from the markdown component with

this.$refs.markdown.items

Conclusion

To access child component’s data from parent with Vue.js, we can assign a ref to the child component.

And then we can access the child component data as a property of the ref.