单击按钮后如何将数据从一个组件发送到另一个组件 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() {
    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

How to send data one component to another after button click Vuejs

javascript

components

vuejs2

prop