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:

html

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

Add click event to the parent like this:

html

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

Here is the full example:

Call Vue component method from outside the component

html

<!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 by 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 root 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 the root Vue instance and register the component. Note that you do not instantiate components directly with new Vue(); instead, you mount the app to an element:

creating an instance of the Vue component

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

In this example, we're creating a new root Vue instance and attaching it to an HTML element with an ID of "app".

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:

accessing the instance of the component in Vue.js

html

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

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:

calling $refs property in Vue.js

app.$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:

Using $nextTick method in Vue.js

app.$nextTick(function () {
  app.$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 mount a Vue instance, add a ref attribute to the component in the template, and access the instance of the component using the $refs property.

Note: This tutorial uses Vue 2 syntax. Vue 2 reached end-of-life in December 2023. For modern projects, use Vue 3 with createApp().

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

Step by Step Guide: ​

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

Step by Step Guide: