現(xiàn)在的前后端分離開發(fā)中,前端使用 Vue 來開發(fā),在研究其功能和特性進行一些小技巧總結(jié),以幫助大家成為更好的 Vue 開發(fā)者。
插槽語法更漂亮
隨著Vue 2.6的推出,已經(jīng)引入了插槽的簡寫方式,之前簡寫可用于事件(例如,@click表示v-on:click事件)或冒號表示方式用于綁定(:src)。 例如,如果有一個表格組件,則可以按以下方式使用此功能:
$on(‘hook:’)
如果要在created或mounted方法中定義自定義事件偵聽器或第三方插件,并且需要在beforeDestroy方法中將其刪除以免引起任何內(nèi)存泄漏,則可以使用此功能。 使用$on(‘hook:’)方法,我們可以僅使用一種生命周期方法(而不是兩種)來定義/刪除事件。
prop 驗證
你可能已經(jīng)知道可以將props驗證為原始類型,例如字符串,數(shù)字甚至對象。 我們還可以使用自定義驗證器,例如,如果要針對字符串列表進行驗證:
動態(tài)指令參數(shù)
Vue 2.6 的最酷功能之一是可以將指令參數(shù)動態(tài)傳遞給組件。 假設(shè)有一個按鈕組件,并且在某些情況下想監(jiān)聽單擊事件,而在其他情況下想監(jiān)聽雙擊事件。 這就是動態(tài)指令派上用場的地方了:
重用同一路由的組件
有時,我們不同路由共用某些時,如果在這些路由之間切換,則默認情況下,共享組件將不會重新渲染,因為Vue 出于性能原因會重用該組件。 但是,如果我們?nèi)匀幌M匦落秩具@些組件,則可以通過在路由器視圖組件中提供:key屬性來實現(xiàn)重新渲染。
從父類到子類的所有 props
這是一個非常酷的功能,可將所有prop從父組件傳遞到子組件。 如果我們有另一個組件的包裝器組件,這將特別方便。 因為,我們不必一個一個將prop傳遞給子組件,而是一次傳遞所有prop:
上面的可以代替下面的做法
從父類到子類的所有事件偵聽器
如果子組件不在父組件的根目錄下,則可以將所有事件偵聽器從父組件傳遞到子組件,如下所示:
使用 JSX
由于Vue CLI 3默認支持使用JSX,因此現(xiàn)在(如果愿意)我們可以使用JSX編寫代碼(例如,可以方便地編寫函數(shù)組件)。 如果尚未使用Vue CLI 3,則可以使用babel-plugin-transform-vue-jsx獲得JSX支持。
自定義 v-model
默認情況下,v-model是@input事件監(jiān)聽器和:value props上的語法糖。但是,我們可以在Vue組件中指定一個模型屬性,以定義使用什么事件和值





暫無評論,快來評論吧!