父元件重新整理子元件也重新整理

prince11發表於2024-05-16
元件

方法就是父元件定義一個變數，然後傳到子元件，子元件一直監聽這個變數，當父元件重新整理時，將變數值賦值成1，然後子元件監聽到父元件傳來的值的變化，進行重新整理操作後再將值變成9，然後父元件接受。這時值變成了9然後父元件再重新整理值就變成了1,，子元件又開始重新整理。這個變數的預設值是0

父元件

        <SlideCard @equipmentMac="getMac" @cardData="getCardData" :isRefresh='isRefresh' @cref='listenRef'></SlideCard>

data裡//子元件重新整理標識isRefresh:0

onPullDownRefresh() {
            // 下拉重新整理 執行先置空然後再加資料避免資料重複
            this.getTagData()
            this.isRefresh = 1
            uni.stopPullDownRefresh()
        },

listenRef(data){
                console.log('已重新整理',data)
                this.isRefresh = data
            },

子元件

props:{
            isRefresh:{
                type:Number,
                default:9
            }
        },

watch:{
            isRefresh:{
                deep:true,
                handler(newValue,oldValue){
                    this.getQueryPersonCard()//子元件更新資料的方法
                    this.$emit('cref',9)
                }
            }
        },

相關文章