Question

有多个组件，起初有一个大组件可以创建其他组件。

http://joxi.ru/DmBl36VFJwq4NA

它们又包含其他组件。

http://joxi.ru/82QZGyRfwj89wA

页面上有许多可点击的元素，可打开带有选择项的弹出窗口。弹出窗口是另一个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;
      }
  },

但是我认为将动作作为字符串传递不是一个好主意。 MB有一些堆栈跟踪吗？

有两个麻烦。

1-弹出窗口如何找出将数据从哪个组件传输到其中？

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

如何找出导致父项的子项？

0 个答案: