关于组件之间使用provide和inject传值
1.在寫項目的時候,由于組件封裝的層次超過了兩層,因而想起了用provide和inject傳值的方式。provide和inject都是與data、methods、鉤子函數同級,千萬不要寫錯!!
基礎用法如下:
父組件中:
provide() {return {parent: this.parent,}},孫組件中:
provide應該是 一個對象或返回一個對象的函數。 該對象包含可注入其子孫的屬性。
---------------------------------------------------------------------------------------------------------------------------------
項目中實際運用到的地方:
父組件中發(fā)起請求,從后端獲取到數據,將獲取到的數據傳遞到孫組件中,父組件獲取到數據賦值給變量
1.開始寫法如下:
父組件中:
?
?孫組件中:
?孫組件中打開調試工具,我們可以發(fā)現inject和data中定義的變量都是一個空數組,究其原因,就是因為父組件中是異步獲取到數據,當數據還沒有獲取到的時候,就已經通過provide傳遞到孫組件中,所以此時,我們需要將父組件中獲取到的數據進行包裝,再傳遞到孫組件中
2.經過包裝之后
?父組件中:
父組件異步獲取到數據,將數據進行簡單的處理。如下:
?
?孫組件中:
此時在孫組件中,我們可以看到調試工具中,provide和inject接受到的是一個函數
?使用的時候,直接調用整個函數即可拿到想要的數據
總結
以上是生活随笔為你收集整理的关于组件之间使用provide和inject传值的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 表格比手机屏幕宽时不压缩,可左右滚动,格
- 下一篇: 明日之后登录显示服务器连接中断,明日之后