Question

我想通过单击按钮将'visualizacao'变量设置为true，但是此按钮在另一个组件中。

具有visualizacao变量的组件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>

组件2与该按钮一起更改组件1的可视化变量

<template>

<button>Change component</button

</template>

<script>

    export default {

        data() {
            return {

            }
        }
    }
</script>

我该如何使用发射？

Answer 1

在Component2中：

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

用emit切换变量值

2 个答案: