How to switch the main component to the specified one, inside the method of another one?

Question

Vue.js

Good afternoon. The question is probably written a little incorrectly, but I could not find anything on my problem in Google, so I decided to write here.
I have App.vue

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

Inside start-screen

here is a map

By clicking on the points, you need to switch the component to another component, in which there will be a panorama of Google maps with the given coordinates. Inside the map point component, I wrote a method like getStarted. How can I switch the current component to the one I need inside this method? I hope I could describe

Answer 1

You have a template d.b. something like:

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

If in a simple way:

<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>

Or use vue-router routing.

Answer 2

In the child component emit('something', param), in the connection of the child component in the template in the methods {myfunction: function(param) {...}} the parent has the necessary actions