Categories
Vue Answers

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

Spread the love

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.

3 replies on “How to access child component’s data from parent with Vue.js?”

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.