Pass json object one component to another vuejs - html

Question

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>

Answer 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.

Answer 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>

Answer 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