Passing data to components in vue js

Question

I m struggling to understand how to pass data between components in vue js    I have read through the docs several times and looked at many vue related questions and tutorials  but I m still not getting it    To wrap my head around this  I am hoping for help completing a pretty simple example    display a list of users in one component  done  send the user data to a new component when a link is clicked  done  - see update at bottom  edit user data and send it back to original component  haven t gotten this far    Here is a fiddle  which fails on step two  https   jsfiddle net retrogradeMT d1a8hps0   I understand that I need to use props to pass data to the new component  but I m not sure how to functionally do it  How do I bind the data to the new component   HTML         lt div id  page-content  gt          lt router-view gt  lt  router-view gt        lt  div gt     lt template id  userBlock   gt      lt ul gt        lt li v-for  user in users  gt   user name   -  lt a v-link    path    new     gt  Show new component lt  a gt        lt  li gt      lt  ul gt    lt  template gt      lt template id  newtemp   name     user name    gt       lt form gt         lt label gt Name   lt  label gt  lt input v-model  name  gt         lt input type  submit  value  Submit  gt       lt  form gt     lt  template gt    js for main component   Vue component  app-page       template    userBlock      data  function         return           users                     ready  function          this fetchUsers        methods        fetchUsers  function            var users                             id  1              name   tom                                       id  2              name   brian                                       id  3              name   sam                                   this  set  users   users                       JS for second component    Vue component  newtemp       template    newtemp     props   name     data  function         return           name  name                       UPDATE  Ok  I ve got the second step figured out  Here is a new fiddle showing the progress  https   jsfiddle net retrogradeMT 9pffnmjp   Because I m using Vue-router  I don t use props to send the data to a new component   Instead  I need set params on the v-link and then use a transition hook to accept it    V-link changes see named routes in vue-router docs      lt a v-link    name   new   params    name  user name     gt  Show new component lt  a gt    Then on the component  add data to the route options see transition hooks    Vue component  newtemp       template    newtemp     route       data  function transition            transition next                  saving the id which is passed in url             name  transition to params name                          data  function         return           name name

User · Answer

I ve found a way to pass parent data to component scope in Vue  i think it s a little a bit of a hack but maybe this will help you   1  Reference data in Vue Instance as an external object  data   dataObj   2  Then in the data return function in the child component just return parentScope   dataObj and voila  Now you cann do things like    parentScope prop    and will work like a charm   Good Luck

User · Answer

A global JS variable  object  can be used to pass data between components  Example  Passing data from Ammlogin vue to Options vue  In Ammlogin vue rspData is set to the response from the server  In Options vue the response from the server is made available via rspData   index html    lt script gt      var rspData     global - transfer data between components  lt  script gt    Ammlogin vue            export default   data  function    return vueData    methods        login  function event           event preventDefault       otherwise the page is submitted            vueData errortxt               axios post  http   vueamm      actions php     action  this  data action  user  this  data user  password  this  data password                then function  response                    vueData user                       vueData password                          activate v-link via JS click                       JSON parse is not needed because it is already an object                 if  response data result      ok                         rspData   response data     set global rspData                     document getElementById  loginid   click                      else                       vueData errortxt    Felaktig av  ndare eller l  senord                                                 catch function  error                       Wu oh  Something went wrong                 vueData errortxt   error message                                Options vue    lt template gt   lt main-layout gt     lt p gt Alternativ lt  p gt     lt p gt Resultat    rspData result   lt  p gt     lt p gt Meddelande    rspData data   lt  p gt     lt v-link href     gt Logga ut lt  v-link gt   lt  main-layout gt   lt  template gt   lt script gt   import MainLayout from     layouts Main vue   import VLink from     components VLink vue   var optData     rspData  rspData      rspData is global  export default      data  function    return optData      components         MainLayout       VLink          lt  script gt

User · Answer

-------------Following is applicable only to Vue 1 --------------  Passing data can be done in multiple ways  The method depends on the type of use     If you want to pass data from your html while you add a new component  That is done using props    lt my-component prop-name  value  gt  lt  my-component gt    This prop value will be available to your component only if you add the prop name prop-name to your props attribute     When data is passed from a component to another component because of some dynamic or static event  That is done by using event dispatchers and broadcasters  So for example if you have a component structure like this    lt my-parent gt       lt my-child-A gt  lt  my-child-A gt       lt my-child-B gt  lt  my-child-B gt   lt  my-parent gt    And you want to send data from  lt my-child-A gt  to  lt my-child-B gt  then in  lt my-child-A gt  you will have to dispatch an event   this  dispatch  event name   data     This event will travel all the way up the parent chain  And from whichever parent you have a branch toward  lt my-child-B gt  you broadcast the event along with the data  So in the parent   events        event name    function data           this  broadcast  event name   data            Now this broadcast will travel down the child chain  And at whichever child you want to grab the event  in our case  lt my-child-B gt  we will add another event   events         event name    function data              Your code                 The third way to pass data is through parameters in v-links  This method is used when components chains are completely destroyed or in cases when the URI changes  And i can see you already understand them     Decide what type of data communication you want  and choose appropriately

User · Answer

The best way to send data from a parent component to a child is using props  Passing data from parent to child via props  Declare props  array or object  in the child Pass it to the child via  lt child  name  quot variableOnParent quot  gt   See demo below   x000D   x000D  Vue component  child-comp       props    message       declare the props   template    lt p gt At child-comp  using props in the template     message    lt  p gt      mounted  function          console log  The props are also available in JS    this message           new Vue     el    app     data        variableAtParent   DATA FROM PARENT          x000D   lt script src  https   unpkg com vue 2 5 13 dist vue min js  gt  lt  script gt    lt div id  app  gt     lt p gt At Parent     variableAtParent    lt br gt And is reactive  edit it   lt input v-model  variableAtParent  gt  lt  p gt     lt child-comp  message  variableAtParent  gt  lt  child-comp gt   lt  div gt  x000D   x000D   x000D

User · Answer

I think the issue is here    lt template id  newtemp   name     user name    gt    When you prefix the prop with   you are indicating to Vue that it is a variable  not a string   So you don t need the      around user name  Try    lt template id  newtemp   name   user name  gt    EDIT-----  The above is true  but the bigger issue here is that when you change the URL and go to a new route  the original component disappears   In order to have the second component edit the parent data  the second component would need to be a child component of the first one  or just a part of the same component

User · Answer

I access main properties using  root    Vue component  example          template    lt div gt  root message lt  div gt            lt example gt  lt  example gt

User · Answer

The above-mentioned responses work well but if you want to pass data between 2 sibling components  then the event bus can also be used  Check out this blog which would help you understand better  supppose for 2 components   CompA  amp  CompB having same parent and main js for setting up main vue app  For passing data from CompA to CompB without involving parent component you can do the following  in main js file  declare a separate global Vue instance  that will be event bus  export const bus   new Vue     In CompA  where the event is generated   you have to emit the event to bus  methods          somethingHappened               bus  emit  changedSomething    new data                 Now the task is to listen the emitted event  so  in CompB  you can listen like  created         bus  on  changedSomething    newData    gt          console log newData               Advantages   Less  amp  Clean code  Parent should not involve in passing down data from 1 child comp to another   as the number of children grows  it will become hard to maintain   Follows pub-sub approach

[javascript] Passing data to components in vue.js

Examples related to javascript

Examples related to vue.js