Javascript 使用emit切换变量值

我想通过单击按钮将“Visualizaco”变量设置为true，但该按钮位于另一个组件中

带有Visualizaco变量的组件1

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

从“@/modules/Casos/patricional/_components/patricional.vue”导入Patricional；
从“@/modules/Casos/patricional/_components/visualizationacatrial.vue”导入VisualizacAtriamonial；
导出默认值{
名称：“卡索帕特斯”，
组成部分：{
“世袭卡”：世袭卡，
“Visualizaco遗产”：Visualizacapotrimonian，
},
数据（）{
返回{
Visualizaco:错误
}
}
}

使用按钮更改组件1的变量visualizacao的组件2

<template>

<button>Change component</button

</template>

<script>

    export default {

        data() {
            return {

            }
        }
    }
</script>

更改组件以下是一个示例：

const Clicker={
模板：`单击我'，
};
新Vue({
el:“#应用程序”，
组件：{Clicker}，
数据（）{
返回{
点击次数：0，
};
},
});
在组件2中：

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

<script>
    export default {

        data() {
            return {

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


Change Component我刚刚更改为这个。$emit（“changeComponent”）；它成功了。非常感谢：）
<template>
  <button @click="changeComponent()">Change component</button
</template>

<script>
    export default {

        data() {
            return {

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

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