Как переключить основной компонент на указанный, внутри метода другого?

Question

[Дима Паутов]

Добрый день. Вопрос наверно составлен немного не корректно, но я в гугле не смог ничего найти по своей проблеме, поэтому решил написать сюда.

Есть у меня App.vue

<template>
    <div id="app" class="go_section">
        <start-screen></start-screen>
    </div>
</template>

Внутри start-screen

вот такая карта

Нажимая на точки, нужно переключить компонент другой компонент, в котором будет панорама гуглокарт с заданными координатами. Внутри компонента точки карты я написал метод, например getStarted. Как внутри этого метода переключить текущий компонент на нужный мне? Надеюсь смог описать

Answer 1

[Evgeny Kulakov]

У вас шаблон д.б. что-то типа:

<template>
<div>
...
<template v-for="point in points" :key="point.id">
  <point :point="point" @click="$emit('gotoOtherComponent')"></point>
</template>
</div>
</template>

Если по-простому:

<template>
    <div id="app" class="go_section">
        <start-screen @gotoOtherComponent="showOther=true"  v-if="!showOther"></start-screen>
        <other-screen v-if="showOther"></other-screen>
    </div>
</template>

Или использовать роутинг vue-router.

Comments

[Дима Паутов]

Ну вот сделал я так:
В компоненте точки, в свойстве methods я создал метод:

getStarted(){

            this.$root.$emit('Panorama', {
                lat: this.point.lat,
                lng: this.point.lng,
                points: this.point.points
            });

        }

По клику на точку, вызываю метод getStarted.

У корневого компонента написал так:

created(){
            this.$root.$on('Panorama', (coords) => {

                

            });
        }

Данные передаются, но, как теперь показать компонент с панорамой и передать в эту панораму данные coords? Или я чего не так понял

[Evgeny Kulakov]

<template>
    <div id="app" class="go_section">
        <start-screen v-if="!showOther"></start-screen>
        <other-screen v-if="showOther"></other-screen>
    </div>
</template>

data: {
showOther: false,
},
created(){
            this.$root.$on('Panorama', (coords) => {
               this.showOther = true
            });
        }

Но имейте ввиду, что это просто пример. И вообще прокидывать событие в $root не очень красиво, т.к. компонент становится зависимым от него.

[Дима Паутов]

Evgeny Kulakov: тогда я не понимаю, как мне из точки на карте, вызвать мою панораму и передать в неё данные. Ваш пример мне не подходит. должен замениться на когда я тыкаю на точку.

Я делал по аналогии тут и что-то я не заметил, что обращение к глобальному компоненту является проблемой.

[Evgeny Kulakov]

Вам из точки не надо ничего вызывать, компонент точки должен знать только данные точки и выплевывать событие, когда на него нажали. Родитель должен отловить это событие и пробросить его дальше или что-то сделать с ним. Вы можете в шаблоне вашей карты сделать что-то типа:

<template>
<div>
  <div v-if="!currentPoint">
  ...
  <template v-for="point in points" :key="point.id">
    <point :point="point" @selected="currentPoint=point"></point>
  </template>
  </div>
  <goolePanorama v-if="currentPoint" :point="currentPoint" />
</div>
</template>

Т.е. вы показываете карту, как только кликнули на точке, делаете currentPoint=point при этом скрывается ваша карта и показывается карта гугла. В компоненте карты гугла можно сделать какую-нить кнопку назад, которая также будет выплевывать событие и по нему текущая точка будет зануляться, что приведет опять к появлению основной карты.

[Дима Паутов]

Evgeny Kulakov: вообщем примерно так и сделал. Всё ок. Спс большое за разъяснение))

Answer 2

[Антон Антон]

В дочернем компоненте emit('something', param), в подключении дочернего компонента в шаблоне в methods {myfunction: function(param) {...}} у родителя нужные действия

Comments

[Дима Паутов]

Ну вот сделал я так:
В компоненте точки, в свойстве methods я создал метод:

getStarted(){

            this.$root.$emit('Panorama', {
                lat: this.point.lat,
                lng: this.point.lng,
                points: this.point.points
            });

        }

По клику на точку, вызываю метод getStarted.

У корневого компонента написал так:

created(){
            this.$root.$on('Panorama', (coords) => {

                

            });
        }

Данные передаются, но, как теперь показать компонент с панорамой и передать в эту панораму данные coords? Или я чего не так понял