How to Call a Vue.js Component Method From Outside The Component

In this tutorial, we will discuss the cleanest way of calling a Vue.js component method from outside the component. Let’s see if there is a nice way to call a method that belongs to one of these components from outside the Vue instance.

You can set ref for child components, after that call in parent via $refs.

Add ref to the child component like this:

<my-component ref="childref"></my-component>

Add click event to the parent like this:

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

Here is the full example:

<!DOCTYPE html>
<html>
  <head>
    <title>How to Call a Vue.js Component Method From Outside The</title>
  </head>
  <body>
    <div id="app">
      <my-component ref="childref"></my-component>
      <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>
    </div>
    <template id="my-template">
      <div style="border: 1px solid; padding: 2px;" ref="childref">
        <p>A counter: {{ count }}</p>
        <button @click="increaseCount">Internal Button</button>
      </div>
    </template>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        components: {
          'my-component': {
            template: '#my-template',
            data: function() {
              return {
                count: 0,
              };
            },
            methods: {
              increaseCount: function() {
                this.count++;
              }
            }
          },
        }
      });
    </script>
  </body>
</html>

Try it Yourself »

Vue components are reusable instances with a name, so that is why they accept the same options as new Vue, data, computed, watch, methods. The exceptions are some root-specific options such as el.

Step be Step Guide:

Let's take a look at other possible ways of doing this as well.

As you may already know there are different ways to achieve this, but one common approach is to use the Vue instance to access the component and call its methods. Here's an example:

Assuming you have a Vue.js component called "MyComponent" with a method called "myMethod", you can call it from outside the component like this:

First, create an instance of the Vue component using the new Vue constructor function, like this:

var myComponentInstance = new Vue({
  el: '#my-component',
  components: {
    'my-component': MyComponent
  }
});

In this example, we're creating a new instance of the "MyComponent" component and attaching it to an HTML element with an ID of "my-component".

Next, you can access the instance of the component and call its methods using the $refs property. Add a ref attribute to the component in the template, like this:

<template>
  <div ref="myComponentRef">
    <!-- Component template here -->
  </div>
</template>

In this example, we're adding a ref attribute to the component and giving it a name of "myComponentRef".

Now you can access the instance of the component and call its methods using the $refs property like this:

myComponentInstance.$refs.myComponentRef.myMethod();

In this example, we're calling the myMethod method of the component using the $refs property.

Note that it's important to ensure that the component is mounted before calling its methods. You can use the $nextTick method to wait until the component is mounted before calling its methods, like this:

myComponentInstance.$nextTick(function () {
  myComponentInstance.$refs.myComponentRef.myMethod();
});

This ensures that the component is fully initialized before calling its methods.

In summary, to call a Vue.js component method from outside the component, you can create an instance of the component, add a ref attribute to the component in the template, and access the instance of the component using the $refs property.

How to Call a Vue.js Component Method From Outside The Component

Step be Step Guide:

Related Resources