How to access to a child method from the parent in vue js

Question

I have two nested components  what is the proper way to access to the child methods from the parent    this  children 0  myMethod   seems to do the trick but it is pretty ugly  isn t it  what can be better way    lt script gt  import child from    my-child   export default     components       child        mounted          this  children 0  myMethod          lt  script gt

User · Accepted Answer

You can use ref   import ChildForm from    components ChildForm   new Vue     el    app     data        item            template       lt div gt        lt ChildForm  item  item  ref  form    gt        lt button type  submit   click prevent  submit  gt Post lt  button gt     lt  div gt         methods        submit           this  refs form submit                components    ChildForm         If you dislike tight coupling  you can use Event Bus as shown by  Yosvel Quintero  Below is another example of using event bus by passing in the bus as props   import ChildForm from    components ChildForm   new Vue     el    app     data        item          bus  new Vue           template       lt div gt        lt ChildForm  item  item   bus  bus  ref  form    gt        lt button type  submit   click prevent  submit  gt Post lt  button gt     lt  div gt         methods        submit           this bus  emit  submit                components    ChildForm         Code of component    lt template gt        lt  template gt    lt script gt  export default     name   NowForm     props    item    bus      methods        submit                              mounted         this bus  on  submit   this submit            lt  script gt    https   code luasoftware com tutorials vuejs parent-call-child-component-method

User · Answer

To communicate a child component with another child component I ve made a method in parent which calls a method in a child with   this  refs childMethod     And from the another child I ve called the root method   this  root theRootMethod     It worked for me

User · Answer

Ref and event bus both has issues when your control render is affected by v-if  So  I decided to go with a simpler method  The idea is using an array as a queue to send methods that needs to be called to the child component  Once the component got mounted  it will process this queue  It watches the queue to execute new methods   Borrowing some code from Desmond Lua s answer  Parent component code  import ChildComponent from    components ChildComponent   new Vue     el    app     data        item          childMethodsQueue             template       lt div gt        lt ChildComponent  item  quot item quot   methods-queue  quot childMethodsQueue quot    gt        lt button type  quot submit quot   click prevent  quot submit quot  gt Post lt  button gt     lt  div gt         methods        submit           this childMethodsQueue push  name  ChildComponent methods save name  params                    components    ChildComponent        This is code for ChildComponent  lt template gt        lt  template gt    lt script gt  export default     name   ChildComponent     props        methodsQueue    type  Array           watch        methodsQueue  function            this processMethodsQueue                 mounted         this processMethodsQueue          methods        save             console log  quot Child saved    quot              processMethodsQueue           if   this methodsQueue  return       let len   this methodsQueue length       for  let i   0  i  lt  len  i              let method   this methodsQueue shift           this method name  method params                         lt  script gt   And there is a lot of room for improvement like moving processMethodsQueue to a mixin

User · Answer

Parent-Child communication in VueJS  Given a root Vue instance is accessible by all descendants via this  root  a parent component can access child components via the this  children array  and a child component can access it s parent via this  parent  your first instinct might be to access these components directly   The VueJS documentation warns against this specifically for two very good reasons    It tightly couples the parent to the child  and vice versa  You can t rely on the parent s state  given that it can be modified by a child component    The solution is to use Vue s custom event interface  The event interface implemented by Vue allows you to communicate up and down the component tree  Leveraging the custom event interface gives you access to four methods     on   - allows you to declare a listener on your Vue instance with which to listen to events  emit   - allows you to trigger events on the same instance  self    Example using  on   and  emit      x000D   x000D  const events   new Vue      x000D      parentComponent   new Vue   x000D        el    parent   x000D        ready     x000D          events  on  eventGreet        gt    x000D            this parentMsg    I heard the greeting event from Child component     this counter  times     x000D              x000D           x000D        data    x000D          parentMsg   I am listening for an event     x000D          counter  0 x000D          x000D          x000D      childComponent   new Vue   x000D        el    child   x000D        methods    x000D        greet  function      x000D          events  emit  eventGreet    x000D          this childMsg    I am firing greeting event     this counter  times     x000D          x000D         x000D      data    x000D        childMsg   I am getting ready to fire an event    x000D        counter  0 x000D        x000D        x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 1 0 28 vue min js  gt  lt  script gt  x000D   x000D   lt div id  parent  gt  x000D     lt h2 gt Parent Component lt  h2 gt  x000D     lt p gt   parentMsg   lt  p gt  x000D   lt  div gt  x000D   x000D   lt div id  child  gt  x000D     lt h2 gt Child Component lt  h2 gt  x000D     lt p gt   childMsg   lt  p gt  x000D     lt button v-on click  greet  gt Greet lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    Answer taken from the original post  Communicating between components in VueJS

[javascript] How to access to a child method from the parent in vue.js

Examples related to javascript

Examples related to vue.js