Vue.js同实例组件间传递JSON对象问题求助

嘿，我来帮你搞定这个组件传值的难题！你遇到的问题其实很典型——Vue的props是单向的父→子传值，而你的add-user和view-users是同级的兄弟组件，所以直接用props肯定传不通。咱们得通过它们的父组件（也就是你创建的#app这个Vue实例）来做中间桥梁，具体步骤如下：

核心思路 #

兄弟组件之间不能直接传递数据，需要：

1. 子组件add-user通过事件触发把数据传给父组件
2. 父组件接收数据并存在自己的数据源里
3. 父组件再通过props把数据传给另一个子组件view-users

修改后的完整代码 #

1. 父组件（Vue实例）维护共享数据 #

首先给你的app实例添加一个currentUser属性，用来存储从add-user传过来的用户数据：

var app = new Vue({
  el:'#app',
  data: {
    currentUser: null // 初始为空，等待接收子组件数据
  }
});

2. 修改add-user组件，添加事件触发逻辑 #

给add-user加一个交互模板，并通过$emit方法触发事件，把用户数据传给父组件：

Vue.component('add-user',{
  data: function(){
    return {
      user:{
        name:'John',
        age:'29',
      }
    }
  },
  template: `
    <div class="add-user">
      <label>姓名：<input v-model="user.name" /></label>
      <label>年龄：<input v-model="user.age" type="number" /></label>
      <button @click="sendUserToParent">提交用户</button>
    </div>
  `,
  methods: {
    sendUserToParent() {
      // 触发名为user-added的事件，同时传递user数据
      this.$emit('user-added', this.user);
    }
  }
});

3. 调整view-users组件，完善渲染逻辑 #

确保组件能接收props，并在有数据时正常显示：

Vue.component('view-users',{
  props:['user'],
  template: `
    <div class="view-users" v-if="user">
      <h4>当前用户信息</h4>
      <p>姓名：{{ user.name }}</p>
      <p>年龄：{{ user.age }}</p>
    </div>
  `
});

4. HTML中绑定事件和props #

在父组件的模板里，给add-user绑定事件监听，给view-users绑定props：

<div id="app">
  <!-- 监听add-user触发的user-added事件，把数据赋值给currentUser -->
  <add-user @user-added="currentUser = $event"></add-user>
  <!-- 把父组件的currentUser通过props传给view-users -->
  <view-users :user="currentUser"></view-users>
</div>

为什么这样能行？ #

• $emit是子组件向父组件传递数据的标准方式，父组件通过@事件名来监听
• 父组件的currentUser作为共享数据源，连接了两个兄弟组件
• props负责把父组件的数据传递给view-users，符合Vue的单向数据流规则

如果之后你的组件层级更复杂，还可以考虑用Vuex来管理全局状态，但对于当前的场景，这种父组件中转的方式简单又好理解，非常适合新手入门~

内容的提问来源于stack exchange，提问作者SarangaR