javascript - Call a Vue.js component method from outside the component

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

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>

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

See below comment of Thomas regarding Vue 3.

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/

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>