子元件請求,父元件展示loading

2021-10-10 04:47:47 字數 881 閱讀 1041

場景:子元件請求各自的資料,需要父親元件loading,等最後乙個元件請求完畢後再取消loading(為了讓loading只顯示乙個,視覺上好看)

解決:當時想當然了,一直採用乙個變數控制展示不展示loading元件,因此沒有找到合適的方案。後來一下子搞明白,可以讓loading變成乙個類似於蒙層的這種方式蓋到上邊,當最後乙個子元件載入完畢後再將蒙層隱藏。**如下

const setloading = () :jsx.element =>

return (

)}

const loading = (props:any) =>  = props

let styleload = {}

if(loading)

} return (

)}

const a = (props: loadingprops):jsx.element =>  = props

useeffect(()=>,3000)

},)return (

111)}

const b = (props: loadingprops):jsx.element => = props

useeffect(()=>,2000)

},)return (

222)}

const c = (props: loadingprops):jsx.element => = props

useeffect(()=>,1000)

},)return (

333)}

總結

​ 還是思維方式的轉變吧,要學會變通,不能碰到乙個場景就想當然的認為之前習慣式的操作就能解決該場景下的業務問題

子元件和父元件

1.定義元件並引用 2.父元件向子元件傳值 3.子元件向父元件傳值 元件間傳值 vuex html中有元件,是一段可以被復用的結構 css中有元件,是一段可以被復用的樣式 js中有元件,是一段可以被復用的功能 vue中也有元件,指的就是乙個模組,是乙個獨立的,完整的 包含html,css,js等 可...

父元件向子元件傳遞資料 14 父元件向子元件通訊

1.不使用 v bind 傳遞資料 2.使用 v bind 傳遞資料 3.以上兩者的區別。先把重要的知識點寫在前面 簡單來說,父元件向子元件傳遞資料可以分為以下幾個步驟 在父元件繫結資料 在子元件使用 props 接收資料 在子元件使用資料。data components 渲染 2.在子元件上繫結 ...

父元件呼叫子元件方法及子元件跟父元件傳參

父元件呼叫子元件方法 父頁面 在父級定義事件比如點選執行子元件方法 this.refs.mychild.getlistmanualoperate this.info 上邊的getlistmanualoperate就是子元件裡的方法 子元件跟父元件傳參 在子元件通過emit來傳遞引數給父元件 this...