Call a Vue js component method from outside the component

Question

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    x000D   x000D  var vm   new Vue   x000D    el    app   x000D    components    x000D       my-component      x000D        template    my-template   x000D        data  function     x000D          return   x000D            count  1  x000D             x000D           x000D        methods    x000D          increaseCount  function     x000D            this count    x000D            x000D          x000D         x000D      x000D      x000D   x000D      external-button   click function   x000D    x000D    vm  my-component   increaseCount       This doesn t work x000D      x000D   lt script src  http   vuejs org js vue js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     x000D     lt my-component gt  lt  my-component gt  x000D     lt br gt  x000D     lt button id  external-button  gt External Button lt  button gt  x000D   lt  div gt  x000D     x000D   lt template id  my-template  gt  x000D     lt div style  border  1px solid  padding  5px   gt  x000D     lt p gt A counter     count    lt  p gt  x000D     lt button  click  increaseCount  gt Internal Button lt  button gt  x000D       lt  div gt  x000D   lt  template gt  x000D   x000D   x000D    So when I click the internal button  the increaseCount   method is bound to its click event so it gets called  There is no way to bind the event to the external button  whose click event I am listening for with jQuery  so I ll need some other way to call increaseCount   EDIT  It seems this works   vm  children 0  increaseCount      However  this is not a good solution because I am referencing the component by its index in the children array  and with many components this is unlikely to stay constant and the code is less readable

User · Answer

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    lt my-component ref  foo  gt  lt  my-component gt    Access the component method    lt script gt      this  refs foo doSomething     lt  script gt

User · Answer

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   lt my-component ref  quot foo quot  gt  lt  my-component gt   Now  elsewhere I can access the component externally  lt script gt  vm  refs foo doSomething      assuming my component has a doSomething   method  lt  script gt   See this fiddle for an example  https   jsfiddle net xmqgnbu3 1   old example using Vue 1  https   jsfiddle net 6v7y6msr

User · Answer

Using Vue 3  const app   createApp         register an options object app component  my-component                              retrieve a registered component const MyComponent   app component  my-component    MyComponent methods greet      https   v3 vuejs org api application-api html component

User · Answer

I have used a very simple solution  I have included a HTML element  that calls the method  in my Vue Component that I select  using Vanilla JS  and I trigger click   In the Vue Component  I have included something like the following    lt span data-id  btnReload   click  fetchTaskList    gt  lt i class  fa fa-refresh  gt  lt  i gt  lt  span gt    That I use using Vanilla JS   const btnReload   document querySelector   data-id  btnReload      btnReload click

User · Answer

Say you have a child method   in the child component   export default       methods            child method                  console log  I got clicked                       Now you want to execute the child method from parent component    lt template gt       lt div gt           lt button  click  exec  gt Execute child component lt  button gt           lt child-cmp ref  child  gt  lt  child cmp gt   lt  -- note the ref  child  here -- gt       lt  div gt   lt  template gt   export default       methods            exec        accessing the child component instance through  refs             this  refs child child method     execute the method belongs to the child component                     If you want to execute a parent component method from child component   this  parent name of method    NOTE  It is not recommended to access the child and parent component like this    Instead as best practice use Props  amp  Events for parent-child communication   If you want communication between components surely use vuex or event bus  Please read this very helpful article

User · Answer

Sometimes you want to keep these things contained within your component  Depending on DOM state  the elements you re listening on must exist in DOM when your Vue component is instantiated   you can listen to events on elements outside of your component from within your Vue component  Let s say there is an element outside of your component  and when the user clicks it  you want your component to respond  In html you have   lt a href  quot   quot  id  quot outsideLink quot  gt Launch the component lt  a gt       lt my-component gt  lt  my-component gt   In your Vue component      methods           doSomething                do something                    created            document getElementById  outsideLink   addEventListener  click   evt   gt                      this doSomething

User · Answer

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

User · Answer

Here is a simple one   this  children indexOfComponent  childsMethodName

User · Answer

You can set ref for child components then in parent can call via  refs   Add ref to child component    lt my-component ref  childref  gt  lt  my-component gt    Add click event to parent    lt button id  external-button   click   refs childref increaseCount    gt External Button lt  button gt     x000D   x000D  var vm   new Vue   x000D    el    app   x000D    components    x000D       my-component      x000D        template    my-template   x000D        data  function     x000D          return   x000D            count  1  x000D             x000D           x000D        methods    x000D          increaseCount  function     x000D            this count    x000D            x000D          x000D         x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     x000D     lt my-component ref  childref  gt  lt  my-component gt  x000D     lt button id  external-button   click   refs childref increaseCount    gt External Button lt  button gt  x000D   lt  div gt  x000D     x000D   lt template id  my-template  gt  x000D     lt div style  border  1px solid  padding  2px   ref  childref  gt  x000D       lt p gt A counter     count    lt  p gt  x000D       lt button  click  increaseCount  gt Internal Button lt  button gt  x000D     lt  div gt  x000D   lt  template gt  x000D   x000D   x000D

User · Answer

This is a simple way to access a component s methods from other component     This is external shared  reusable  component  so you can call its methods from other components  export default      name   SharedBase      methods          fetchLocalData  function module  page                     fetches some data           return   jsonData                      This is your component where you can call SharedBased component s method s  import SharedBase from   your path to component    var sections        export default      name   History      created  function           this sections   SharedBase methods  fetchLocalData    intro    history

User · Answer

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

User · Answer

I am not sure is it the right way but this one works for me  First import the component which contains the method you want to call in your component  import myComponent from    MyComponent    and then call any method of MyCompenent  myComponent methods doSomething

[javascript] Call a Vue.js component method from outside the component

Examples related to javascript

Examples related to vue.js