父组件调用子组件的方法和异步细节处理

父组件调用子组件的方法和异步细节处理

一、场景描述

父组件在点击编辑editRole的时候。子组件的弹框展示出来，并展示了当前行的数据。

二、使用步骤

代码如下（示例）：

// 以下是父组件的页面
// 父组件引用子组件 ，子组件是弹框，showRoleDialog控制弹框的展示和隐藏
// .sync父组件监听子组件的数据变化
 <assign-role ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
// 父组件页面 触发editRole事件
<el-table-column label="操作" sortable="" fixed="right" width="280">
	<template v-slot="{ row }">
	  <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
	  <el-button type="text" size="small">转正</el-button>
	  <el-button type="text" size="small">调岗</el-button>
	  <el-button type="text" size="small">离职</el-button>
	  <el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
	  <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
	</template>
</el-table-column>
        
// 父组件的方法
 async  editRole(id) {
      this.userId = id // props传值 是异步的，调用子组件要加async await修饰
      await this.$refs.assignRole.getUserDetailById(id) // 父组件调用子组件方法
      this.showRoleDialog = true
    },

2.读入数据

代码如下（示例）：

// 以下是子组件的方法
// 这个方法是什么时候调用？props传值是异步的 所以这里不能用this.userId
// 这个方法是给父组件调用的
    async getUserDetailById(id) {
      const { roleIds } = await getUserDetailById(id) // 将用户所拥有的角色赋值给当前用户的对象
      this.roleIds = roleIds
    },
    async btnOK() {
      await assignRoles({ id: this.userId, roleIds: this.roleIds }) // 保存用户的角色
      // 关闭弹层
      this.$emit('update:showRoleDialog', false)
    //   this.$parent.showRoleDialog = false
    },
    btnCancel() {
      // 取消
      this.roleIds = [] // 重置数组 将它还原成一个空
      this.$emit('update:showRoleDialog', false)
    }
  

---

总结

1. sync 用来监听父组件传递的showRoleDialog值更新。需要搭配emit使用。
2. 给引用的子组件加上ref，可以在父组件拿到子组件下的方法。
3. props传值是异步传值，所以子组件的getUserDetailById方法不能用props下传过来的userI。