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

您可以做的最初是在User组件中定义一个空的用户模型，就像虚拟对象一样，将其作为道具传递给编辑模态组件，并使用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访问它：

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

这会奏效。但是还有另一种方法可以使用$ refs 为编辑模式提供ref属性：

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

然后在脚本部分访问此ref：

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

在数据（）

中编辑组件定义名称和电子邮件

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

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

2 个答案: