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

Question

Can I get event from Invisible Component?

At first, the 'LoadingSpinner.vue' is working with v-if is ture. and I send event from DisplayStatus.

but, the ProcessingPage's method(processCompleted) doesn't work. can I use event with Invisible component? can I know why..? If It can, How can I try that?

Thank you for watching my question.

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 should be v-on:process-completed which you are emitting inside component.

emitting event only works if component is mouted and emiting event using v-if is not the best idea you can use v-show too.

v-show works like the component will be always mounted but it will be hidden and when expresion is true the it will set the css display none to block.