我可以從不可見的組件中獲取事件嗎？（Vue.js）

Question

我可以從 Invisible Component 獲取事件嗎？

起初，“LoadingSpinner.vue”正在使用 v-if 是真的。 我從 DisplayStatus 發送事件。

但是，ProcessingPage 的方法（processCompleted）不起作用。 我可以將事件與 Invisible 組件一起使用嗎？ 我能知道為什么..？ 如果可以，我該如何嘗試？

謝謝你看我的問題。

處理頁面.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); } }

顯示狀態.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 您在組件內部發出的。

發出事件僅在組件已被安裝並且使用 v-if 發出事件不是您也可以使用 v-show 的最佳主意時才有效。

v-show 的工作方式就像組件將始終安裝但它會被隱藏，當表達式為真時，它將設置 css 顯示無阻止。