Переключить значение переменной с помощью emit

Question

Я хочу установить для переменной 'visualizacao' значение true при нажатии кнопки, но эта кнопка находится в другом компоненте.

КОМПОНЕНТ 1 с переменной visualizacao

<template>

        <div>
            <card-patrimonial v-if="!visualizacao"/>
            <visualizacao-patrimonial v-else/>

        </div>

    </template> 

    <script>
        import Patrimonial from '@/modules/Casos/Patrimonial/_components/Patrimonial.vue';
        import VisualizacaoPatrimonial from '@/modules/Casos/Patrimonial/_components/VisualizacaoPatrimonial.vue';

        export default {
            name: "CasosPartes",
            components: {
                'card-patrimonial': Patrimonial,
                'visualizacao-patrimonial': VisualizacaoPatrimonial,
            },
            data(){
                return{
                    visualizacao: false
                }
            }
        }
    </script>

КОМПОНЕНТ 2 с кнопкой для изменения переменной visualizacao компонента 1

<template>

<button>Change component</button

</template>

<script>

    export default {

        data() {
            return {

            }
        }
    }
</script>

Как это сделать с помощью emit?

Answer 1

В компоненте 2:

<template>
  <button @click="changeComponent()">Change component</button
</template>

<script>
    export default {

        data() {
            return {

            }
        },
        methods: {
            changeComponent(){
                this.$emit("listenButtonEvent");
            }
        }
    }
</script>

В компоненте 1:

<template>
    <div>
        <card-patrimonial @changeComponent="changeVisualizacao" v-if="!visualizacao"/>
        <visualizacao-patrimonial v-else/>
    </div>
</template> 

<script>
    import Patrimonial from '@/modules/Casos/Patrimonial/_components/Patrimonial.vue';
    import VisualizacaoPatrimonial from '@/modules/Casos/Patrimonial/_components/VisualizacaoPatrimonial.vue';

    export default {
        name: "CasosPartes",
        components: {
            'card-patrimonial': Patrimonial,
            'visualizacao-patrimonial': VisualizacaoPatrimonial,
        },
        data(){
            return{
                visualizacao: false
            }
        },
        methods: {
            changeVisualizacao(){
                this.visualizacao = true;
            }
        }
    }
</script>

Answer 2

Вот пример: https://jsfiddle.net/z2v3nsuq/

const Clicker = {
  template: `<button @click="$emit('clicked')">Click me</button>`,
};


new Vue({
  el: '#app',
  components: { Clicker },
  data() {
    return {
      clickCount: 0,
    };
  },
});