[Vuejs]-Firing child method from parent vue 2

by

3👍

✅

Using ref the way you are is more akin to using refs with Vue 3’s Composition API and <script setup> tag, rather than Vue 2’s Options API.

With the Options API you just need to add the ref property to the component in your template, then you can access it in your methods with this.$refs. This is documented in the Vue 2 docs under Accessing Child Component Instances & Child Elements

When the same ref is attached to multiple elements like with v-for, the this.$refs will hold an array of all elements with that same ref.

<div v-for="(tab, index) in patientProcess">
  <component v-bind:is="tab.component" ref="comp">
</div>

Again you’ve mixed up Vue 3 Composition API and Options API when it comes to calling the mounted hook. It’s onMounted:() => {} with Composition API, mounted() {} with Options API

// correct way to call mounted hook in Vue 2
mounted() {
  console.log(this.$refs.comp) // logs "[VueComponent, VueComponent, VueComponent]"
}

You can then search the array to find the specific component needed and call the desired method, or reference the exact index needed:

this.$refs.comp[0].submit()
👤yoduh

Leave a comment