Question

我是vuejs的新手我想将JSON对象传递给同一个vue实例中的另一个组件。以下是我的代码。从组件添加用户到组件视图用户。我试过vue道具，但它没有用非常感谢你。

＆＃13;

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',
 
});

＆＃13;

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

＆＃13;

Answer 1

道具主要用于将数据从父组件传递到子组件，子组件不能直接修改传递的数据并反映父组件的更改。为了传递每个组件的数据，一个好方法是使用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。

Answer 2

您可以使用简单的外部状态管理系统。 Reference

或者您可以使用事件处理从一个组件发出事件并在另一个组件中侦听事件。 Reference

另请参阅此博客文章，了解有关在组件之间共享数据的信息。 Link

Answer 3

如果你在许多组件中使用变量，vuex可能是更好的主意。但是如果你想将值传递给组件，你可以像那样使用

<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
    }
});

在view-user或add-user组件中，您可以像那样声明

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

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

3 个答案:

将json对象的一个​​组件传递给另一个vuejs

3 个答案:

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