按钮单击Vuejs后如何将数据发送到另一个组件

Question

我有两个组件，一个是用户组件，用户组件内部有编辑用户组件（模态框），所以我的问题是如何在单击编辑用户按钮后将用户对象传递给编辑用户组件。

用户视图

<div>
    <v-layout row wrap>
        <v-flex sm3 xs2 v-for="user in users">
            <v-card>
                <v-card-media src="https://vuetifyjs.com/static/doc-images/cards/plane.jpg"
                              height="200px">
                </v-card-media>
                <v-card-title primary-title>
                    <div>
                        <h3 class="headline mb-0">{{user.name}}</h3>
                        <div><b>Email : </b>{{user.email}}</div>
                    </div>
                </v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn primary dark @click="editUser(user)">Edit</v-btn>
                    <v-btn error dark>View</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>
    </v-layout>

    <edit-modal></edit-modal>

</div>

编辑模式

<v-layout row justify-center>
    <v-dialog persistent width="30%">
        <v-card>
            <v-card-title>
                <span class="headline">User Profile</span>
            </v-card-title>
            <v-card-text>
                <v-container grid-list-md>
                    <v-layout wrap>
                        <v-flex xs12 sm6 md12>
                            <v-text-field label="Legal first name" required></v-text-field>
                        </v-flex>
                        <v-flex xs12 md6>
                            <v-text-field label="Email" required ></v-text-field>
                        </v-flex>
                    </v-layout>
                </v-container>
                <small>*indicates required field</small>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn light @click.native="dialog">Close</v-btn>
                <v-btn primary @click.native="saveUser">Save</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</v-layout>

Screen shot

Answer 1

你可以做的是最初在用户组件中定义一个空的用户模型，就像虚拟对象一样，并将其作为道具传递给编辑模态组件并使用 v-if 隐藏和显示模型：

<edit-modal v-if="isShowModel" :userObj="userObj"></edit-modal>

在脚本部分：

data() {
   return {
      userObj: {
          name: '',
          email: ''
      },
      isShowModel: false
   }
},
methods: {
  editUser(user) {
    this.userObj.name = user.name;
    this.userObj.email = user.email;
    this.isShowModel = true;
  }
}

在编辑组件中使用道具访问它：

props:['userObj'],
data() {
  return {
    newUserObj: Object.assign({}, this.userObj),
  }
}

这会奏效。但是还有另一种方法可以使用 $refs 给编辑模态一个 ref 属性：

<edit-modal ref="editme"></edit-modal>

然后在脚本部分访问这个参考：

methods: {
  editUser(user) {
    this.$refs.editme.name = user.name;
    this.$refs.editme.email = user.email;
  }
}

在编辑组件中，在 data() 中定义名称和电子邮件

data() {
    return {
       name: '',
       email: ''
    }
}

现在要更新父组件中那些已编辑的值，您可以使用 $emit:

<v-btn primary @click.native="saveUser">Save</v-btn>

在脚本中：

methods: {
  saveUser() {
    this.$emit('onEditValue', this.name, this.email);
  }
}

在父组件中：

<edit-modal
  ref="editme"
  @onEditValue="editCall"
></edit-modal>

在脚本中：

methods: {
  editCall(name, email) {
    this.user.name = name;
    this.user.email = email;
  }
}

Answer 2

如果两个组件是兄弟组件，可以使用Vuejs提供的Event Bus

Reference Link