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

我是vuejs新手，我想将JSON对象传递给同一vue实例中的另一个组件。下面显示我的代码。从组件添加用户到组件视图用户。我试过vue道具，但没用 多谢各位

Vue.component（'view-users'{
道具：['user']，
模板：“{user.name}”
}); 
Vue.component（'添加用户'{
数据：函数（）{
返回{
用户：{
姓名：'jhon'，
年龄:"29",，
}
}
}
});
var app=新的Vue({
el:“#应用程序”，
});
您可以使用简单的外部状态管理系统。

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

还可以看看这篇关于在组件之间共享数据的博文
 您可以使用简单的外部状态管理系统。

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

还可以看看这篇关于在组件之间共享数据的博文
 道具主要用于将数据从父组件传递到子组件，子组件不能直接修改传递的数据并反映父组件上的更改。为了在每个组件周围传递数据，一个好方法是使用
Vuex

首先创建状态，可能如下所示

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

对于最简单的情况，您现在没有做任何异步操作，您可以通过
突变
修改状态：

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

下面是一个简单的例子：

如果应用程序不是太大（和），也可以使用EventBus。对于
Vuex
，您可以在此处查看如何使用和。
道具主要用于将数据从父组件传递到子组件，子组件不能直接修改传递的数据并反映父组件上的更改。为了在每个组件周围传递数据，一个好方法是使用
Vuex

首先创建状态，可能如下所示

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

对于最简单的情况，您现在没有做任何异步操作，您可以通过
突变
修改状态：

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

下面是一个简单的例子：

如果应用程序不是太大（和），也可以使用EventBus。对于
Vuex
，您可以在此处查看如何使用和。
如果您在许多组件中使用变量，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
    }
});

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


从“../add user.vue”导入AddUser
从“../view users.vue”导入ViewUser
var app=新的Vue({
el:“#应用程序”，
组成部分：{
“添加用户”：添加用户，
“查看用户”：查看用户
}
});

在视图用户或添加用户组件中，您可以这样声明

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

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

{{user.name}
导出默认值{
道具：{
用户：{
类型：'您的类型'，
必填项：真/假
}
},
...
}
如果在许多组件中使用变量，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
    }
});

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


从“../add user.vue”导入AddUser
从“../view users.vue”导入ViewUser
var app=新的Vue({
el:“#应用程序”，
组成部分：{
“添加用户”：添加用户，
“查看用户”：查看用户
}
});

在视图用户或添加用户组件中，您可以这样声明

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

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

{{user.name}
导出默认值{
道具：{
用户：{
类型：'您的类型'，
必填项：真/假
}
},
...
}
非常感谢。你节省了我的时间：）非常感谢。你节省了我的时间：）