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

Question

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

用户 View

<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 组件中定义一个空的用户模型，就像虚拟对象一样，并将其作为 props 传递以编辑模态组件并使用 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>

然后在脚本部分访问此引用:

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