我可以从不可见的组件中获取事件吗？（Vue.js）答案

【问题标题】：Can I get event from Invisible Component?(Vue.js)我可以从不可见的组件中获取事件吗？（Vue.js）
【发布时间】：2021-08-27 01:42:27
【问题描述】：

我可以从 Invisible Component 中获取事件吗？

一开始，'LoadingSpinner.vue' 正在使用 v-if 是真的。我从 DisplayStatus 发送事件。

但是，ProcessingPage 的方法（processCompleted）不起作用。我可以将事件与 Invisible 组件一起使用吗？我能知道为什么..？如果可以，我该如何尝试？

感谢您观看我的问题。

ProcessingPage.vue

<template>
  <div class="process-container">
      <LoadingSpinner v-if="isProcessing" />
      <DisplayStatus v-if="isProcessing" v-on:child-event="processCompleted">       </DisplayStatus>
  </div>
</template>

<script>
import LoadingSpinner from './common/LoadingSpinner.vue';
import DisplayStatus from './DisplayStatus.vue';
export default {
    components: {
        LoadingSpinner,
        DisplayStatus
    },
    data() {
        return {
            isProcessing: false,
        }
    },
    methods: {
      processCompleted() {
            this.isProcessing = false;
            console.log('completed');
      }
    },
    mounted() {
        // this.status = 'processing';
        this.isProcessing = true;
        // this.loading = setInterval(this.getStatus, 5000);
    }
}

DisplayStatus.vue

<template>
    <div>
        <h1>{{ status }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            status:'',
        }
    },
    methods: {
        async getStatus() {
            const dataId = this.$store.state.dataId;
            const response = await this.$store.dispatch('GETSTATUS',dataId);
            if(response.data.status == 'done') {
                this.$emit('processCompleted');
                this.status = 'Done!!';
                console.log(this.status);
                clearInterval(this.loading);
            }else if(response.data.status == 'failed') {
                clearInterval(this.loading);
                this.warring = true;
                this.isProcessing = false;
                this.status = 'Something Wrong...';
            }
        },
    },
    mounted() {
        this.status = 'processing';
        this.loading = setInterval(this.getStatus, 5000);
    }
}
</script>

<style>

</style>

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

<DisplayStatus v-if="isProcessing" v-on:child-event="processCompleted">       </DisplayStatus>

v-on:child-event 应该是 v-on:process-completed 您在组件内部发出的。

仅当组件被调出并且使用 v-if 发出事件不是您也可以使用 v-show 的最佳主意时，才会发出事件。

v-show 就像组件总是被挂载但它会被隐藏，当 expresion 为 true 时，它会将 css display none 设置为阻止。

【讨论】：