Using Composition API to call a method on a child component

Question

Using Composition API to call a method on a child component

In my current project, I am facing a challenge with a parent component needing to call a method from 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 a method named doSomething:

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

My project is based on VueJS3 and the Composition API, and I tried using a template ref to access the method in the child component. However, I am facing issues and can't figure out what I'm missing. If anyone has any insights or suggestions, I would greatly appreciate it. Thank you!

javascript vue.js vuejs3 vue-composition-api vue-script-setup

Answer 1

Answer №1

Just a heads up, if you're using the <script setup> (Composition API), you'll need to incorporate the defineExpose function.

Check out more details here: https://v3.vuejs.org/api/sfc-script-setup.html#defineexpose

Here's an example of how to use it in a parent component:

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

children.value.doSomething();
</script>

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

And in the ChildrenComponent:

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

defineExpose({
  doSomething,
});

</script>

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

Answer 2

Just a heads up, if you're using the <script setup> (Composition API), you'll need to incorporate the defineExpose function.

Check out more details here: https://v3.vuejs.org/api/sfc-script-setup.html#defineexpose

Here's an example of how to use it in a parent component:

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

children.value.doSomething();
</script>

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

And in the ChildrenComponent:

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

defineExpose({
  doSomething,
});

</script>

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

Answer 3

Answer №2

Make sure to include the value field in your ref, like this:

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

https://codesandbox.io/s/amazing-cori-5hgi9?fontsize=14&hidenavigation=1&theme=dark

If you are using the script setup syntax to define the child component, you should utilize defineExpose to make the method accessible externally

<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>

Answer 4

Make sure to include the value field in your ref, like this:

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

https://codesandbox.io/s/amazing-cori-5hgi9?fontsize=14&hidenavigation=1&theme=dark

If you are using the script setup syntax to define the child component, you should utilize defineExpose to make the method accessible externally

<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>

Answer 5

Answer №3

When I encountered an error with the ref method, I discovered an alternative approach that worked well for me. By using watch for a property set by a reactive variable in the parent component and emitting back the results, I found a solution that provided more control:

Child Component:

const props = defineProps({
  callRequested: {
    type: Boolean,
  },
});
function myFunc() {
  let result = false;
  // Perform necessary actions
  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 for the next call
  // Perform actions in parent component based on the function result
}
</script>

Answer 6

When I encountered an error with the ref method, I discovered an alternative approach that worked well for me. By using watch for a property set by a reactive variable in the parent component and emitting back the results, I found a solution that provided more control:

Child Component:

const props = defineProps({
  callRequested: {
    type: Boolean,
  },
});
function myFunc() {
  let result = false;
  // Perform necessary actions
  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 for the next call
  // Perform actions in parent component based on the function result
}
</script>

Using Composition API to call a method on a child component

Answer №1

Answer №2

Answer №3

Child Component:

Parent Component:

Similar questions

Error message: "When namedPlaceHolder parameter is disabled, bind parameters must be in the form of an

Develop a Rails object using AJAX and JavaScript

Jsoup encounters a complication due to lack of support for Javascript

Having trouble getting JavaScript to work when returned via AJAX

Oops! Before proceeding, make sure to call TestBed.initTestEnvironment() first

Directing a user in real-time to the login portal

Toggle the ASP validation control using JavaScript

The POST request to the localhost API endpoint resulted in a 404 Not Found error

What is causing the failure of success function commands to be executed?

The Importance and Purpose of Incorporating a Callback

Heroku Foreman unexpectedly stops while using Express.js bodyParser() function

I have implemented a code snippet that verifies if the incoming week aligns with the existing week, triggering an alert accordingly

What is the best way to eliminate the nesting in this ternary operation?

The Angular directive ng-model is not able to return a value

Strange behavior: JS object values disappear when accessed statically

The environment variable process.env.variable works perfectly fine during local development, however, it seems to malfunction once the application is deployed to Heroku within

Tips for obtaining the final document in a VueFire query

jQuery can be utilized to generate repeated fields

Ensure you wait for the next tick before making any assertions using vitest

Is there a way to verify if both the username and email have already been registered?