我可以从不可见组件获取事件吗？(Vue.js)

Question

我可以从不可见组件获取事件吗？

起初，'LoadingSpinner.vue' 正在使用 v-if 是 true。然后我从 DisplayStatus 发送事件。

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

感谢您观看我的问题。

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>

Answer 1

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

v-on:child-event 应该是 v-on:process-completed ，你在组件内部发射。

发射事件仅在组件被 mouted 时有效，使用 v-if 发射事件不是最好的主意，您也可以使用 v-show。

v-show 的工作方式就像组件将始终挂载但它将被隐藏，当表达式为真时它将设置 css 显示 none 为阻塞。

我可以从不可见组件获取事件吗？(Vue.js)

Can I get event from Invisible Component?(Vue.js)

html

javascript

vue.js

vue-component

vuejs2