Sometimes, we want to call a method in a child component with Vue.js.

In this article, we’ll look at how to call a method in a child component with Vue.js.

How to call a method in a child component with Vue.js?

To call a method in a child component with Vue.js, we can pass in a prop from the parent component to its child.

Then in the child component, we watch the prop’s value and run the method we want.

For instance, we write

<script>
export default {
  //...
  props: ["testProp"],
  methods: {
    sayHello() {
      alert("hello");
    },
  },
  watch: {
    testProp(newVal, oldVal) {
      this.sayHello();
    },
  },
};
</script>

in the child component to register the testProp prop and add the sayHello method.

We also add a watcher for testProp in watch which calls sayHello when testProp changes value.

Then in the parent component, we write

<template>
  <div>
    <ChildComponent :testProp="trigger" />
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      trigger: 0,
    };
  },
};
</script>

to add the ChildComponent and set the testProp prop to trigger.

And we change the trigger value to run sayHello.

Conclusion

To call a method in a child component with Vue.js, we can pass in a prop from the parent component to its child.

Then in the child component, we watch the prop’s value and run the method we want.