Is there a way to utilize the child component's method?

Question

I am looking to access a child component's method from the parent in Vue.js. To achieve this, I plan on using $refs.

Code Example:

<template>
  <div>Parent!</div>
</template>

Script:

<script>
    Vue.component('child',{
      template: `<div>I am child</div>`,
    }
    export default {
       name: 'Parent'
    }
</script>

How can I declare $refs for my child component within this setup?

Answer 1

Answer №1

To accomplish this, you can designate a reference ID to the child component by utilizing the ref attribute.

<template>
  <div>Parent!</div>
  <child ref="childComponent"/>
</template>

Now you have the ability to access your child component instance from the parent component by referencing it like so:

this.$refs.childComponent // where componentName is the ref value

This also means you can invoke the methods that are defined within your child component.

this.$refs.childComponent.myFunction();

For more information, please refer to the documentation.

Answer 2

To accomplish this, you can designate a reference ID to the child component by utilizing the ref attribute.

<template>
  <div>Parent!</div>
  <child ref="childComponent"/>
</template>

Now you have the ability to access your child component instance from the parent component by referencing it like so:

this.$refs.childComponent // where componentName is the ref value

This also means you can invoke the methods that are defined within your child component.

this.$refs.childComponent.myFunction();

For more information, please refer to the documentation.