Vue之调用组件返回对象

需求：调用通讯录子组件选人，选完人后返回数据到父组件进一步处理。

1.引用子组件

<org-picker
  ref="orgPicker"
  title="请选择人员"
  multiple
  :selected="orgPickerSelected"
  @handleSelected="selected"
  type="user"
/>

2.点击按钮显示子组件

const orgPicker = ref(null);
const goToSelectNodePeople = () => {
  orgPicker.value.show();
};

3.子组件点击确认返回对象，关闭弹窗

selectOk() {
  this.$emit('handleSelected', Object.assign([], this.select.map(v => {
    return {
      id: v.id,
      name: v.name,
      type: orgLabelToDict[v.type]
    }
  })))
  this.visible = false
  this.recover()
}

4.父组件处理返回对象

const orgPickerSelected = ref([]);
const selected = (selectUsers) => {
  selectUsers.map((user) => {
    //去重
    if (
      dataSource.value.nextNodeAssigneesMap[nextNode.value.nodeId].filter(
        (item) => item.relateName === user.id
      ).length > 0
    )
      return;
    const newUser = {
      assigneeType: 1,
      relateName: user.id,
      displayName: user.name,
      nodeId: nextNode.value.nodeId,
    };
    dataSource.value.nextNodeAssigneesMap[nextNode.value.nodeId].push(newUser);
    assignees.value.push(newUser);
  });
};