Pass json object one component to another vuejs

问题

I'm new to vuejs I want to pass an JSON object to another component within same vue instance. following show the my code. from component add-user to component view-user. I tried vue props but it didn't work Thank you very much.

Vue.component('view-users',{
  props:['user'],
  template: '<span>{{ user.name }}</span>'
}); 

Vue.component('add-user',{
	data: function(){
  		return 	{
      		user:{
          	name:'jhon',
            age:'29',
          }
      }
  }
});

var app = new Vue({
	el:'#app',
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
<add-user></add-user>

<view-users></view-users>
</div>

回答1:

Props are mostly for passing data from parent components to child components, and a child component cannot directly modify the passed data and reflect the changes on parent components. In order to pass data around every component, a good way to do it is using Vuex.

First you create the state, possibly like

const state = {
  user:{
    name:'john',
    age:'29',
  }
}

And for the simplest case, that you are not doing anything asynchronous for now, you modify the state through mutations:

const mutations = {
  CHANGE_NAME(state, payload) {
    state.user.name = payload
  },
  CHANGE_AGE(state, payload) {
    state.user.age = payload
  }
}

With all these in place you can create the Vue store:

const store = new Vuex.Store({
  state,
  mutations
})

Then use it in your Vue instance:

const app = new Vue({
  el: '...',
  data: { ... },
  store,
  // ...
})

Finally, in your components, you can access and modify the state as follows:

Vue.component('my-component', {
  data() {
    return {
      // ...
    }
  },
  computed() {
    user() {
      // this is one way to do, you can also check out mapstate
      return this.$store.state.user
    }
  },
  methods: {
    // you can also check out mapMutations
    changeName(val) { this.$store.dispatch('CHANGE_NAME', val) },
    changeAge(val) { this.$store.dispatch('CHANGE_AGE', val) },
  }
})

Here's a simple example: http://jsfiddle.net/teepluss/zfab6tzp/6/

You can also use EventBus if you app is not too big (tutorial and documentation). And for Vuex, you can check out how to use state and mutations here.

回答2:

If you use variable in many component, vuex could be better idea. But if you want to pass value to component, you can use like that

<div id="app">
  <add-user :user=user></add-user>
  <view-users :user=user></view-users>
</div>

import AddUser from '../add-user.vue'
import ViewUser from '../view-users.vue'

var app = new Vue({
    el:'#app',
    components: {
     'add-user': AddUser,
     'view-users': ViewUser
    }
});

in view-user or add-user component you can declare like that

<template><span>{{ user.name }}</span></template>
<script>
    export default {
      props: {
        user: {
          type:'your type',
          required: true/false
        }
      },
      ...
    }
</script>

回答3:

You can use simple external state management system. Reference

Or you can use event handling to emit an event from one component and listen for the event in another component. Reference

Also have a look at this blog post regarding sharing data between components. Link

来源：https://stackoverflow.com/questions/49505160/pass-json-object-one-component-to-another-vuejs