Calling method on Child Component - Composition API

Question

I have a parent component where I need to call a method that exists in one of its child components:

<template>
  <div>
    <button @click="callChildMethod">
    <child-component ref="child" />
  </div>
</template>
<script>
  setup(props) {
    const child = ref(null)
    const callChildMethod = () => {
      child.doSomething()
    }

    return {
      child,
      callChildMethod
    }
  }
</script>

The child component contains the doSomething method:

const doSomething = () => { console.log('calling method....') }

Since I'm using the VueJS3 and the Composition API, my approach was to use a template ref to call the method in the child component. Obviously is not working but I can't see what I'm missing. Does someone have a clue about this one? Thanks in advance

Андрей Сорока · Accepted Answer · 2021-12-04 19:50:41Z

60

P.s. for <script setup> (Composition API) need to use defineExpose

https://v3.vuejs.org/api/sfc-script-setup.html#defineexpose

Parent component:

<script setup>
...
const childred = ref();

childred.value.doSomething()
</script>

<template>
  <ChildrenComponent ref="childred" />
</template>

ChildrenComponent:

<script setup>
...
function doSomething(){
  console.log(1);
}

defineExpose({
  doSomething,
});

</script>

<template>
  <div>123</div>
</template>

answered Dec 4, 2021 at 19:50

Андрей Сорока

1,1581 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ali Ghafoori Over a year ago

Great, when using script setup syntax just we have to do this way

Sil2 Over a year ago

thanks a lot man! All day I was searching for a solution. nobody mentioned defineExpose!!!! you are the best!!!!!!!

Bassem Ramzy Over a year ago

Seems not working on Vue 3 5.0.8 Composition API <script setup>, error: Cannot read properties of undefined (reading 'doSomething')

Андрей Сорока Over a year ago

@BassemRamzy seems like a problem with your components

Bruno Tavares Over a year ago

@BassemRamzy I had exactly the same problem. The only way I made it work was to inspect the ref object and I found that you can call the function from childred.value.$.exposed.doSomething()

Boussadjra Brahim · Accepted Answer · 2023-04-17 21:46:22Z

19

You're missing the value field in your ref, it should be :

 const callChildMethod = () = {
  child.value.doSomething()
}

If the child component is defined using the script setup syntax you should use defineExpose to expose the method to the outside

<script setup>

function doSomething(){
  //......
}

defineExpose({
  doSomething,
});

</script>

Parent :

<template>
  <div>
    <button @click="callChildMethod">
    <child-component ref="child" />
  </div>
</template>
<script>
  setup(props) {
    const child = ref(null)
    const callChildMethod = () => {
      child.doSomething()
    }

    return {
      child,
      callChildMethod
    }
  }
</scrip>

or

<template>
  <div>
    <button @click="callChildMethod">
    <child-component ref="child" />
  </div>
</template>
<script setup>

    const child = ref(null)
    const callChildMethod = () => {
      child.doSomething()
    }


</scrip>

edited Apr 17, 2023 at 21:46

answered Nov 18, 2020 at 9:01

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

Skywalker Over a year ago

The function statement const callChildMethod = () = { should be const callChildMethod = () => { in that whay it becomes an arrow-function

Bassem Ramzy Over a year ago

Getting an error "child.doSomething is not a function", on latest play.vuejs.org

Bassem Ramzy · Accepted Answer · 2023-02-12 11:02:19Z

2

Using ref generates an error with me, I found out another handshaking way (using watch for a property set by a reactive variable in parent, emitting back the results) that's fine with me, and gives more control, in case needed:

Child Component:

const props = defineProps({
  callRequested: {
    type: Boolean,
  },
});
function myFunc() {
  let result = false ;
  // Do your stuff
  return result;
}
const emit = defineEmits(['funcResult']);
watch(
  () => props.callRequested,
  (newVal) => {
    console.log(`newVal is: ${newVal}`);
    if (newVal)
      emit('funcResult', myFunc());
  }
)

Parent Component:

<template>
  <div>
    <button @click="callChildMethod">
    <child-component 
     :call-requested="state.callRequested" 
     :@func-result="funcResult"
    />
  </div>
</template>
<script setup>
const state = reactive({
  callRequested: false,
});
function callChildMethod() {
  state.callRequested= true;
}
function funcResult(param) {
  state.callRequested = false;  // Reset it for next call
  // Do parent stuff based on param = function result
}
</script>

edited Feb 12, 2023 at 11:02

answered Feb 12, 2023 at 10:36

Bassem Ramzy

4161 gold badge5 silver badges11 bronze badges

1 Comment

Bassem Ramzy Over a year ago

ref worked with me only after I defineExpose a variable (in addition to the function).

Collectives™ on Stack Overflow

Calling method on Child Component - Composition API

3 Answers 3

5 Comments

2 Comments

Child Component:

Parent Component:

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Child Component:

Parent Component:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related