Как узнать, какой дочерний компонент вызвал родительский? - PullRequest
0 голосов
/ 13 декабря 2018

Есть несколько компонентов, сначала есть один большой, который создает другие компоненты.

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;
      }
  },

Но я думаю, что проходить действие как строку не очень хорошая идея.Мб есть какая-то трассировка стека?

Есть две проблемы.

1 - как всплывающее окно может узнать, из какого компонента были переданы данные?

2 -Как связать результат выбора всплывающего окна с данными дочерних компонентов, чтобы переопределить их?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...