如何找出是哪个子组件导致了父组件?

有几个组件,首先有一个大的组件创建其他组件。

http://joxi.ru/DmBl36VFJwq4NA

它们又包含其他组件。

http://joxi.ru/82QZGyRfwj89wA

在页面上有各种可点击的元素,可以打开一个带有select的弹出窗口。弹出窗口是另一个Vue组件。弹出窗口接受数据并将其显示在一个选择框中。接下来,用户在此选择中选择一些内容并按下确认按钮。

我需要将弹出窗口的结果与组件中的特定元素相关联。问题是用户可以打开所有三个组件的弹出窗口。点击所有这些项目打开弹出窗口

http://joxi.ru/52a53oGUE4lke2

但所有这些元素都有不同的成分

主组件的代码包含弹出组件

    <template>
        <!--some html-->
            <select-modal @close-modal="hideSelectModal" v-if="selectModal" :data="selectModalData"></select-modal>
        <!--some html-->
    </template>

<script>
        data: () => ({
            selectModal: false,
            selectModalData: {},
        }),

        methods: {
            showSelectModal(data, event){

                if(this.selectModal === true){
                    this.hideSelectModal();
                }else{
                    this.selectModalData = data;
                    this.selectModal = true;
                }
            },

            hideSelectModal(){
                this.selectModalData = [];
                this.selectModal = false;
            },
        }
    }
</script>

下面是我如何将数据从子组件传递到父组件的代码

methods: {
    showModal(dataArr, selectedItem, action, event){

        let selectObject = {items: [], selected: selectedItem, action: action};
        for(let i = 0; i < dataArr.length; i++){
            selectObject.items.push({value: dataArr[i].id, text: dataArr[i].name})
        }

        this.$emit('open-modal', selectObject, event);
    }
},

弹出组件中有更新方法

  update(){

      if(this.value === null){
          return false;
      }

      switch(this.data.action){
          case 'serie':
              this.updateGameSerie();
              break;
          case 'game':
              this.updateGame();
              break;
          case 'set':
              this.updateSet();
              break;
      }
  },

但我认为把传球动作当作一根绳子不是个好主意。有堆栈跟踪吗?

有两个麻烦。

1-弹出窗口如何找出数据从哪个组件传输到它?

2-如何将弹出式选择结果与子组件的数据关联,以便重新定义它们?