How to call from a component to another vue component?

Question

Vue.js

Hello. Tell me a moment. Maybe he hasn't reached the dock yet, or missed it. I am new to Vue. There is such an example. Page. It has 2 components. On load, the first one is rendered.

<template>
  <div class="wrapper">

    <div class="component-wrapper1" v-if="oneActive">
      <Component1 />
    </div>

    <div class="component-wrapper2" v-if="twoActive">
      <Component2 />
    </div>

    
  </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                oneActive: true,
                twoActive: false,
            }
        },

The first component contains a button, on click it should change the values ​​of the active element, and show the second component. But the method is in the component, and the date is on the page. I understand, apparently a very stupid question, but I'm at the very beginning. How to do it?

Answer 1

Option 1 . Events : on the button, the component emits an event. The “page” listens to it and switches its data.

<!-- template компонента -->
<button @click="this.$emit('buttoned')">не нажимать</button>

<!-- template страницы -->
<Component1 v-on:buttoned="triggerComponents" />
<!-- надо написать метод triggerComponents(), который поменяет данным true/false -->

Option 2 , out of the blue: Vuex . Store oneActive, twoActivenot in data, but in state globally available store. Run mutations on buttons from components .