问题描述
我是vuejs的新手,我想将JSON对象传递给同一vue实例中的另一个组件.下面显示我的代码.从组件添加用户到组件查看用户.我尝试了Vue道具,但是没有用非常感谢你.
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 workThank 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>
推荐答案
道具主要用于将数据从父组件传递到子组件,并且子组件无法直接修改传递的数据并反映父组件上的更改.为了在每个组件周围传递数据,一种很好的方法是使用 Vuex
.
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',
}
}
在最简单的情况下,您暂时不执行任何异步操作,请通过 mutations
修改状态:
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
}
}
所有这些就绪后,您可以创建Vue商店:
With all these in place you can create the Vue store:
const store = new Vuex.Store({
state,
mutations
})
然后在您的Vue实例中使用它:
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) },
}
})
这是一个简单的示例: http://jsfiddle.net/teepluss/zfab6tzp/6/
Here's a simple example: http://jsfiddle.net/teepluss/zfab6tzp/6/
如果您的应用程序不太大,也可以使用EventBus(教程和文档).对于 Vuex
,您可以查看如何使用状态和突变此处.
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.
这篇关于将json对象的一个组件传递给另一个vue.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!