Call a Vue.js component method from outside the component

call vue method from javascript
vue component
vue refs
vue reusable components
vue nested components
vue dynamic component
vue emit
vue call component

Let's say I have a main Vue instance that has child components. Is there a way of calling a method belonging to one of these components from outside the Vue instance entirely?

Here is an example:

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

$('#external-button').click(function()
{
  vm['my-component'].increaseCount(); // This doesn't work
});
<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  
  <my-component></my-component>
  <br>
  <button id="external-button">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 5px;">
  <p>A counter: {{ count }}</p>
  <button @click="increaseCount">Internal Button</button>
    </div>
</template>

In the end I opted for using Vue's ref directive. This allows a component to be referenced from the parent for direct access.

E.g.

Have a compenent registered on my parent instance:

var vm = new Vue({
    el: '#app',
    components: { 'my-component': myComponent }
});

Render the component in template/html with a reference:

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

Now, elsewhere I can access the component externally

<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>

See this fiddle for an example: https://jsfiddle.net/xmqgnbu3/1/

(old example using Vue 1: https://jsfiddle.net/6v7y6msr/)

Calling a component method from outside javascript, Hi all, I have a page composed by a and a with a list of filters (checkboxes), and another with the content retrieved into a vue component  Let's say I have a main Vue instance that has child components. Is there a way of calling a method belonging to one of these components from outside the Vue instance entirely? Here is an example:


You can use Vue event system

vm.$broadcast('event-name', args)

and

 vm.$on('event-name', function())

Here is the fiddle: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

Official way to call a method from outside the view model. · Issue , What is the official way for outside code to call a method in Vue? .com/​questions/44886698/call-a-vuejs-method-inside-a-component-outside-export-​default  How to call vue instance outside it in Javascript. Possible duplicate of Call a Vue JS component method from outside the component – Saurabh Nov 23 '16 at 9:33.


Since Vue2 this applies:

var bus = new Vue()

// in component A's method

bus.$emit('id-selected', 1)

// in component B's created hook

bus.$on('id-selected', function (id) {

  // ...
})

See here for the Vue docs. And here is more detail on how to set up this event bus exactly.

If you'd like more info on when to use properties, events and/ or centralized state management see this article.

Calling a Vue.Js component method from outside, If you are trying to integrate an already existing page to a view component you might want to call the component from the existing page. To refer a method that belongs to one of the child components of the main Vue instance you can use Vue's ref directive. vue js trigger method (6) A slightly different (simpler) version of the accepted answer: Have a component registered on the parent instance: export default {components: {'my-component': myComponent }}


A slightly different (simpler) version of the accepted answer:

Have a component registered on the parent instance:

export default {
    components: { 'my-component': myComponent }
}

Render the component in template/html with a reference:

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

Access the component method:

<script>
    this.$refs.foo.doSomething();
</script>

Call a Vue.js component method from outside the component, This example shows you how to call a Vue.js component method from outside the component. First create a child component. Now in your  I&#39;m trying to integrate Vue into a Backbone.js app. What is the official way for outside code to call a method in Vue? Is it something like: // inside the Backbone.View this.vue = new Vue({ met


You can set ref for child components then in parent can call via $refs:

Add ref to child component:

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

Add click event to parent:

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

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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>

Vue.js call component method from Vue instance, Hi, I'm pretty new to Vue.js and I'm struggling with this particular issue. I made a counter components that get its value from the server. Hi, I'm pretty new to Vue.js and I'm struggling with this particular issue. I made a counter components that get its value from the server. This component has an update() method that I call once in the ready section of my component. In my Vue instance I'd like to call this same update() method from time to time, when I need to reload the counters.


Vue.js Internals, And when you attempt to call this method outside of the component, you don't use the methods property at all. So how are we able to call that  Since components are reusable Vue instances, they accept the same options as new Vue, such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are a few root-specific options like el.


Call a Vue.js component method from outside the component, var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-​template', data: function() { return { count: 1, }; }, methods: { increaseCount:  Vue.js Parent Call Child Component Method November 30, 2017. vuejs By Child Component Refs. Assign a ref id to child component, and you can access the child component


How to use refs to access your application DOM in Vue.js , DOM elements can be easily manipulated by defining methods on the particular The $refs can be accessed both inside the Vue.js instance and outside of it. Open the components folder and copy this into the test.vue file: Accessing Component Methods and State from Outside React 14 February 2018. On: code. Most React apps I build are self-contained - the entirety of the app lives within a root component, and is responsible for rendering the full web page/app. And the app doesn't need to communicate with other JavaScript or elements on the page.