Vue開發收集(開發中的技巧)

2021-09-11 23:40:56 字數 1049 閱讀 4678

在大多數的情況下,我們不要直接訪問或是操作元件的dom,但是有時確實需要這樣做

在每個vue例項的子元件中可以使用體會$root訪問到vue的根例項:

例項化根元件

new vue(

//子元件

export default

}複製**

這樣就直接訪問到了根上的資料,這種我們可以在根上儲存一些資料,然後後邊使用,但是這只是對小型的專案適用,大一點的,或是資料儲存複雜的專案還是推薦使用vuex

vue的子元件可以使用$parent來訪問父級例項,通過這種方法可以避開使用props傳值,使用該屬性可以直接獲取,修改父級的資料,呼叫父級的方法,並且具有響應式:

export default 

}複製**

這樣我們很方便的獲取到了父級的資料,但是這並不是最好的解決方式,這樣操作使用父級的資料,我們可能造成不可預期的子級修改父級資料,最後我們都不知道**做了修改

我們再看官方文件中給的乙個例子:

google-map元件中有乙個getmap方法,該方法是用來獲取googlemap的例項

子元件google-map-region,google-map-region的子元件都需要使用google-map元件的getmap方法獲取到地圖例項。

如果子元件越多最後我們不得不寫this.$parent.$parent.......,這樣的**就出現了,這樣肯定不舒服,好在vue提供了乙個很好的解決方法「依賴注入」

provide允許我們定義父元件的方法給後代元件傳遞:

//父元件通過provide向子元件提供方法

export default ,

provide

()

}}複製**

inject允許我們在後代元件中獲取上層元件的方法並使用

export default , 

}複製**

注意!當呼叫this.getmap的時候這個方法的作用域還是父元件中!!

Vue開發收集(keep alive)

在使用vue做開發的時候,我們有時會遇到需要保留元件狀態的情況,防止頁面重新繪製,這時候就需要使用keep alive元件,該元件屬於vue的內建元件,同transition一樣,他本身不會渲染。當元件在內被切換,它的activated和deactivated這兩個生命週期鉤子函式將會被對應執行,也...

Sybian開發收集

nokia官方培訓 symbian4300 筆記 二 symbianosbasics symbian是乙個software licensing公司,由nokia,sonyericsson index.html 索愛,松下,西門子,三星等公司控股,其中nokia股份最高,佔到近50 symbian本身...

Sublime Text 外掛程式 全棧開發收集

sublime text 具有漂亮的使用者介面和強大的功能,例如 縮圖,多重選擇,快捷命令等。sublime text 更妙的是它的可擴充套件性。所以,這裡挑選了 全棧開發必備的10款sublime text外掛程式 讓本已精彩的編輯器更加好用 全端開發的碼農們不用去網上乙個個找了,趕緊收藏起來吧 ...