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

ID : 10022

viewed : 55

Tags : javascriptvue.jsjavascript

Top 5 Answer for javascript - Call a Vue.js component method from outside the component

vote vote

90

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

vote vote

82

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>

vote vote

77

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.

vote vote

65

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/

vote vote

54

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> 

Top 3 video Explaining javascript - Call a Vue.js component method from outside the component

Related QUESTION?