Vue3 Parent component call child component method

defineExpose can expose child component props and methods

// in Parent
<template>
<ChildComponent ref="myChild"/>
</template>

<script setup>
const myChild = ref(null);

function testCall() {
  myChild.value.childMethod();
}

</script>

// ChildComponent
<template> ... </template>
<script setup>

function childMethod() {
 // do something
}    

defineExpose({
        childMethod
    });
</script>

Depending on setup and versions some of the suggestions may not work for everyone. I have found this useful and works for me.

This will allow you to call any Child's "named" mathod from your Root component. You can pass in some data as well as on example below.

Child component

Expose your method using expose list. Accepts array of methods.

<template>... your child component...</template>

<script>
export default {
expose: ['doSomeMagic'],
methods: {
    dosomeMagic(params){
        console.log("Passed in params", params);
    }
}

</script>

Root App.vue

Import your component and add ref with some magic per example: ref="passInSomeMagic"

<template>
    <DoMagicComponent :bookmark="device" ref="passInSomeMagic"/>
</template>

<script>
import DoMagicComponent from "./components/DoMagicComponent";
import { ref } from 'vue';
const passInSomeMagic = ref(0);
export default {
name: "App",
  components: {
    DoMagicComponent
},
methods: {
    helloWorld(){
        this.$refs.passInSomeMagic.dosomeMagic({"hi", "test 1234"});
    }
}

</script>

More details on expose can be found here: https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for

If not using script setup it is directly callable at the parent component by

this.$refs.childComponent.methodToInvoke();

Otherwise if a script setup section must/should be declared at the child component, I learned that I had to declare it like this inside a defineComponent section.

<script>
  import {defineComponent, defineExpose} from 'vue';
  
  export default defineComponent({
  
    setup() {
      // context now contains this  
      defineExpose({
        methodToInvoke: this.methodToInvoke
      });
    },

    methods: {
      methodToInvoke(): {
      ...
      }
    }
  });
</script>

It cannot be declared as a separate section in a SFC (single file component) when having the component also declared in a <script> section

<script setup>
  import {defineExpose} from 'vue';
  
  defineExpose({
    methodToInvoke: this.methodToInvoke
  });
</script>

since the this context is not given here.

If I got something wrong please let me know since I am not a vue3 specialist and rather just beginning with vue3 ;-)

In Vue 3, when using syntax API to call a child method from its own parent, two pitfalls are often easy to fall into: 1) ‘value’ attribute of the child component reference is missed in the parent component script. 2) the child function is not exposed to external by using defineExpose. See How to call a child component’s function from the parent in Vue

You might want to pass in a prop to the child, and react to a change-event by calling the method. This could look something like this:

<!-- Parent.vue -->
<script setup>
/* declare invokeChildMethod */
</script>

<template>
  <Child :prop="invokeChildMethod" /> 
</template>

As can be seen in the code below, when the variable (here called invokeChildMethod) changes (in the parent), an event for the child will be fired.

Here's a resource on watching props in Vue3.

Need to keep in mind that if your child component are being iterated through an array, passInSomeMagic will be an array. So you have to call your child component's function something like this:

if (Array.isArray(passInSomeMagic.value)) {
    for (let idx = 0; idx < FilterItemsComponent.value.length; idx++) {
      passInSomeMagic.value[idx].childFunction();
    }
  } else passInSomeMagic.value.childFunction();