How to call function on child component on parent events

Question

Context  In Vue 2 0 the documentation and others clearly indicate that communication from parent to child happens via props   Question  How does a parent tell its child an event has happened via props   Should I just watch a prop called event  That doesn t feel right  nor do alternatives   emit  on is for child to parent  and a hub model is for distant elements    Example  I have a parent container and it needs to tell its child container that it s okay to engage certain actions on an API  I need to be able to trigger functions

User · Answer

If you have time  use Vuex store for watching variables  aka state  or trigger  aka dispatch  an action directly

User · Answer

Give the child component a ref and use  refs to call a method on the child component directly   html    lt div id  app  gt     lt child-component ref  childComponent  gt  lt  child-component gt     lt button  click  click  gt Click lt  button gt     lt  div gt    javascript   var ChildComponent       template    lt div gt   value   lt  div gt      data  function          return         value  0               methods        setValue  function value            this value   value               new Vue     el    app     components         child-component   ChildComponent        methods        click  function             this  refs childComponent setValue 2 0                  For more info  see Vue documentation on refs

User · Answer

I think we should to have a consideration about the necessity of parent to use the child   s methods In fact parents needn   t to concern the method of child but can treat the child component as a FSA finite state machine  Parents component to control the state of child component So the solution to watch the status change or just use the compute function is enough

User · Answer

you can use key to reload child component using key   lt component  is  child1   filter  filter   key  componentKey  gt  lt  component gt    If you want to reload component with new filter  if button click filter the child component  reloadData                    this filter     filter1   filter2      this componentKey    1         and use the filter to trigger the function

User · Answer

Calling child component in parent  lt component  is  quot my component quot  ref  quot my comp quot  gt  lt  component gt   lt v-btn  click  quot  refs my comp alertme quot  gt  lt  v-btn gt   in Child component mycomp vue     methods            alertme                alert  quot alert quot

User · Answer

What you are describing is a change of state in the parent  You pass that to the child via a prop  As you suggested  you would watch that prop  When the child takes action  it notifies the parent via an emit  and the parent might then change the state again    x000D   x000D  var Child     x000D    template    lt div gt   counter   lt  div gt    x000D    props    canI    x000D    data  function      x000D      return   x000D        counter  0 x000D         x000D       x000D    watch    x000D      canI  function      x000D        if  this canI    x000D            this counter  x000D          this  emit  increment    x000D          x000D        x000D      x000D    x000D  new Vue   x000D    el    app   x000D    components    x000D       my-component   Child x000D       x000D    data    x000D      childState  false x000D       x000D    methods    x000D      permitChild  function      x000D        this childState   true  x000D         x000D      lockChild  function      x000D        this childState   false  x000D        x000D      x000D     x000D   lt script src    cdnjs cloudflare com ajax libs vue 2 2 1 vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D   lt my-component  can-I  childState  v-on increment  lockChild  gt  lt  my-component gt  x000D   lt button  click  permitChild  gt Go lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    If you truly want to pass events to a child  you can do that by creating a bus  which is just a Vue instance  and passing it to the child as a prop

User · Answer

Did not like the event-bus approach using  on bindings in the child during create   Why   Subsequent create calls  I m using vue-router  bind the message handler more than once--leading to multiple responses per message   The orthodox solution of passing props down from parent to child and putting a property watcher in the child worked a little better   Only problem being that the child can only act on a value transition   Passing the same message multiple times needs some kind of bookkeeping to force a transition so the child can pick up the change   I ve found that if I wrap the message in an array  it will always trigger the child watcher--even if the value remains the same   Parent        data  function           msgChild  null           methods          mMessageDoIt  function              this msgChild     doIt                               Child        props    msgChild       watch           msgChild   function arMsg             console log arMsg 0                     HTML    lt parent gt      lt child v-bind     msgChild   msgChild    gt  lt  child gt   lt  parent gt

User · Answer

A simple decoupled way to call methods on child components is by emitting a handler from the child and then invoking it from parent    x000D   x000D  var Child     x000D    template    lt div gt   value   lt  div gt    x000D    data  function      x000D      return   x000D        value  0 x000D         x000D       x000D    methods    x000D     setValue value    x000D       this value   value  x000D        x000D       x000D    created     x000D      this  emit  handler   this setValue   x000D      x000D    x000D   x000D  new Vue   x000D    el    app   x000D    components    x000D       my-component   Child x000D       x000D    methods    x000D     setValueHandler fn    x000D       this setter   fn x000D         x000D      click     x000D       this setter 70  x000D        x000D      x000D     x000D   lt script src  https   cdn jsdelivr net npm vue 2 5 17 dist vue js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D     lt my-component  handler  setValueHandler  gt  lt  my-component gt  x000D     lt button  click  click  gt Click lt  button gt    x000D   lt  div gt  x000D   x000D   x000D    The parent keeps track of the child handler functions and calls whenever necessary

User · Answer

The below example is self explainatory  where refs and events can be used to call function from and to parent and child      PARENT  lt template gt     lt parent gt       lt child        onChange  childCallBack        ref  childRef         data  moduleData        gt       lt button  click  callChild  gt Call Method in child lt  button gt     lt  parent gt   lt  template gt    lt script gt  export default     methods        callChild           this  refs childRef childMethod  Hi from parent               childCallBack message          console log  message from child   message                 lt  script gt      CHILD  lt template gt     lt child gt       lt button  click  callParent  gt Call Parent lt  button gt     lt  child gt   lt  template gt    lt script gt  export default     methods        callParent           this  emit  onChange    hi from child               childMethod message          console log  message from parent   message                lt  script gt

User · Answer

You can use  emit and  on  Using  RoyJ code   html    lt div id  app  gt     lt my-component gt  lt  my-component gt     lt button  click  click  gt Click lt  button gt     lt  div gt    javascript   var Child       template    lt div gt   value   lt  div gt      data  function          return         value  0               methods        setValue  function value            this value   value               created  function         this  parent  on  update   this setValue          new Vue     el    app     components         my-component   Child        methods        click  function             this  emit  update   7                  Running example  https   jsfiddle net rjurado m2spy60r 1

[javascript] How to call function on child component on parent events

Examples related to javascript

Examples related to vue.js

Examples related to event-handling

Examples related to vuejs2