html - 将 json 对象一个组件传递给另一个 vuejs

Question

我是 vuejs 的新手，我想将一个 JSON 对象传递给同一 vue 实例中的另一个组件。下面显示我的代码。从组件添加用户到组件 View 用户。我尝试了 vue Prop ，但没有用 非常感谢你。

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 主要用于将数据从父组件传递给子组件，子组件不能直接修改传递的数据并将更改反射(reflect)到父组件上。为了在每个组件周围传递数据，一个好的方法是使用 Vuex。

首先你创建状态，可能像

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

对于最简单的情况，您现在没有执行任何异步操作，您可以通过mutations 修改状态:

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

有了所有这些，您就可以创建 Vue 商店了:

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

然后在你的 Vue 实例中使用它:

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

最后，在您的组件中，您可以按如下方式访问和修改状态:

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/

如果您的应用不是太大(tutorial 和 documentation)，您也可以使用 EventBus。对于 Vuex，您可以查看如何使用 state和 mutations在这里。