Как обращаться из компонента в другой компонент vue?

Question

[slagoris]

Привет. Подскажите момент. Может еще не дошел в доке, или пропустил. Я новичок на Vue. Есть вот такой пример. Страница. На ней 2 компонента. При загрузке рендерится первый.

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

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

Answer 1

[Сергей Соколов]

Вариант 1. События: по кнопке компонент эмитит событие. «Страница» его слушает и переключает свои данные.

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

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

Вариант 2, навырост: Vuex. Хранить oneActive, twoActive не в data, а в state глобально доступного store. По кнопкам из компонентов запускать мутации.