日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
絕對干貨~！學(xué)會這些Vue小技巧

 學(xué)會使用$attrs 與 $listeners，二次包裝組件就靠它了 

漢陽網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),漢陽網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為漢陽成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的漢陽做網(wǎng)站的公司定做！

前幾天產(chǎn)品經(jīng)理給我甩過來一份管理系統(tǒng)的設(shè)計原型，我打開看了看,發(fā)現(xiàn)系統(tǒng)中的大部分彈框右下角都是確定和取消兩個按鈕。如果使用element-ui提供的Dialog，那么每一個彈框都要手動加按鈕，不但代碼量增多，而且后面如果按鈕UI，需求發(fā)生變化，改動量也比較大。

如果可以將Dialog進(jìn)行二次封裝，將按鈕封裝到組件內(nèi)部，就可以不用重復(fù)去寫了。說干就干。

定義基本彈框代碼

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5.

但上面的代碼存在一個問題，無法將Dialog自身的屬性和事件暴露到外部（雖然可以通過props及$emit一個一個添加，但是很麻煩）,這時候就可以使用$attrs與$listeners

使用$attrs與$listeners
$attrs: 當(dāng)組件在調(diào)用時傳入的屬性沒有在props里面定義時，傳入的屬性將被綁定到$attrs屬性內(nèi)（class與style除外，他們會掛載到組件最外層元素上）。并可通過v-bind="$attrs"傳入到內(nèi)部組件中

$listeners: 當(dāng)組件被調(diào)用時，外部監(jiān)聽的這個組件的所有事件都可以通過$listeners獲取到。并可通過v-on="$listeners"傳入到內(nèi)部組件中。

修改彈框代碼

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.   :visible.sync="visibleDialog" 
    8. 
  
  
  
  
  8.   title="測試彈框" 
    9. 
  
  
  
  
  9.   @opened="$_handleOpened" 
    10. 
  
  
  
  
  10. > 
    11. 
  
  
  
  
  11.   這是一段內(nèi)容 
    12. 
  
  
  
  
  12.  
    13.

 使用require.context實(shí)現(xiàn)前端工程自動化
require.context是一個webpack提供的Api,通過執(zhí)行require.context函數(shù)獲取一個特定的上下文,主要是用于實(shí)現(xiàn)自動化導(dǎo)入模塊。

什么時候用？當(dāng)一個js里面需要手動引入過多的其他文件夾里面的文件時，就可以使用。

在Vue項(xiàng)目開發(fā)過程中，我們可能會遇到這些可能會用到require.context的場景

當(dāng)我們路由頁面比較多的時候，可能會將路由文件拆分成多個，然后再通過import引入到index.js路由主入口文件中

當(dāng)使用svg symbol時候，需要將所有的svg圖片導(dǎo)入到系統(tǒng)中（建議使用svg-sprite-loader）

開發(fā)了一系列基礎(chǔ)組件，然后把所有組件都導(dǎo)入到index.js中，然后再放入一個數(shù)組中，通過遍歷數(shù)組將所有組件進(jìn)行安裝。

對于上述的幾個場景，如果我們需要導(dǎo)入的文件比較少的情況下，通過import一個一個去導(dǎo)入還可以接受，但對于量比較大的情況，就變成了純體力活，而且每次修改增加都需要在主入口文件內(nèi)進(jìn)行調(diào)整。這時候我們就可以通過require.context去簡化這個過程。

現(xiàn)在以上述第三條為例,來說明require.context的用法

常規(guī)用法

組件通過常規(guī)方式安裝

require.context基本語法

通過require.context安裝Vue組件

自定義v-model,原來這么簡單
在用Vue開發(fā)前端時，不論使用原生還是封裝好的UI庫，對于表單組件，一般都會使用到v-model。雖然v-model是一個語法糖，但是吃到嘴里挺甜的啊。學(xué)會自定義v-model，還是很有必要的。

基本用法
一個組件上的v-model默認(rèn)是通過在組件上面定義一個名為value的props,同時對外暴露一個名為input的事件。

源碼：

使用方式：

自定義屬性與事件
通常情況下，使用value屬性與input事件沒有問題，但是有時候有些組件會將value屬性或input事件用于不同的目的，比如對于單選框、復(fù)選框等類型的表單組件的value屬性就有其他用處，參考（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value）。或者希望屬性名稱或事件名稱與實(shí)際行為更貼切，比如active,checked等屬性名。

使用.sync,更優(yōu)雅的實(shí)現(xiàn)數(shù)據(jù)雙向綁定
在Vue中，props屬性是單向數(shù)據(jù)傳輸?shù)?父級的prop的更新會向下流動到子組件中，但是反過來不行。可是有些情況，我們需要對prop進(jìn)行“雙向綁定”。上文中，我們提到了使用v-model實(shí)現(xiàn)雙向綁定。但有時候我們希望一個組件可以實(shí)現(xiàn)多個數(shù)據(jù)的“雙向綁定”，而v-model一個組件只能有一個(Vue3.0可以有多個)，這時候就需要使用到.sync。

.sync與v-model的異同
相同點(diǎn)：

兩者的本質(zhì)都是語法糖，目的都是實(shí)現(xiàn)組件與外部數(shù)據(jù)的雙向綁定

兩個都是通過屬性+事件來實(shí)現(xiàn)的

不同點(diǎn)(個人觀點(diǎn)，如有不對，麻煩下方評論指出，謝謝)：

一個組件只能定義一個v-model,但可以定義多個.sync

v-model與.sync對于的事件名稱不同，v-model默認(rèn)事件為input,可以通過配置model來修改，.sync事件名稱固定為update:屬性名

自定義.sync
在開發(fā)業(yè)務(wù)時，有時候需要使用一個遮罩層來阻止用戶的行為（更多會使用遮罩層+loading動畫），下面通過自定義.sync來實(shí)現(xiàn)一個遮罩層

動態(tài)組件，讓頁面渲染更靈活
前兩天產(chǎn)品經(jīng)理來了新的需求了，告訴我，需要根據(jù)用戶的權(quán)限不同，頁面上要顯示不同的內(nèi)容，然后我就哼哧哼哧的將不同權(quán)限對應(yīng)的組件寫了出來，然后再通過v-if來判斷要顯示哪個組件，就有了下面的代碼

但是看到上面代碼的那一長串v-if,v-else-if,我感覺我的代碼潔癖癥要犯了，不行，這樣code review過不了關(guān)，我連自己這一關(guān)都過不了，這時候就改動態(tài)組件發(fā)揮作用了。

mixins，更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用
mixins是Vue提供的一種混合機(jī)制，用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。怎么去理解混入呢，我覺得和Object.assign，但實(shí)際與Object.assign又有所不同。

基本示例

在開發(fā)echarts圖表組件時，需要在窗口尺寸發(fā)生變化時，重置圖表的大小，此時如果在每個組件里面都去實(shí)現(xiàn)一段監(jiān)聽代碼，代碼重復(fù)太多了，此時就可以使用混入來解決這個問題

 
 
 
 
    
  
  
  
  
  1. // 混入代碼 resize-mixins.js 
    2. 
  
  
  
  
  2. import { debounce } from 'lodash' 
    3. 
  
  
  
  
  3. const resizeChartMethod = Symbol('resizeChart') 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. export default { 
    6. 
  
  
  
  
  6.   data() { 
    7. 
  
  
  
  
  7.     // 在組件內(nèi)部將圖表init的引用映射到chart屬性上 
    8. 
  
  
  
  
  8.     return { 
    9. 
  
  
  
  
  9.       chart: null 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11.   }, 
    12. 
  
  
  
  
  12.   created() { 
    13. 
  
  
  
  
  13.     window.addEventListener('resize', this[resizeChartMethod]) 
    14. 
  
  
  
  
  14.   }, 
    15. 
  
  
  
  
  15.   beforeDestroy() { 
    16. 
  
  
  
  
  16.     window.removeEventListener('reisze', this[resizeChartMethod]) 
    17. 
  
  
  
  
  17.   }, 
    18. 
  
  
  
  
  18.   methods: { 
    19. 
  
  
  
  
  19.     // 通過lodash的防抖函數(shù)來控制resize的頻率 
    20. 
  
  
  
  
  20.     [resizeChartMethod]: debounce(function() { 
    21. 
  
  
  
  
  21.       if (this.chart) { 
    22. 
  
  
  
  
  22.         this.chart.resize() 
    23. 
  
  
  
  
  23.       } 
    24. 
  
  
  
  
  24.     }, 100) 
    25. 
  
  
  
  
  25.   } 
    26. 
  
  
  
  
  26. } 
    27. 
  
  
  
  
  27.  
    28. 
  
  
  
  
  28.  
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30.  
    31.

不同位置的混入規(guī)則

在Vue中，一個混入對象可以包含任意組件選項(xiàng)，但是對于不同的組件選項(xiàng)，會有不同的合并策略。

data 對于data,在混入時會進(jìn)行遞歸合并，如果兩個屬性發(fā)生沖突，則以組件自身為主，如上例中的chart屬性

生命周期鉤子函數(shù)

對于生命周期鉤子函數(shù)，混入時會將同名鉤子函數(shù)加入到一個數(shù)組中，然后在調(diào)用時依次執(zhí)行。混入對象里面的鉤子函數(shù)會優(yōu)先于組件的鉤子函數(shù)執(zhí)行。如果一個組件混入了多個對象，對于混入對象里面的同名鉤子函數(shù)，將按照數(shù)組順序依次執(zhí)行，如下代碼:

 
 
 
 
    
  
  
  
  
  1. const mixin1 = { 
    2. 
  
  
  
  
  2.   created() { 
    3. 
  
  
  
  
  3.     console.log('我是第一個輸出的') 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. const mixin2 = { 
    8. 
  
  
  
  
  8.   created() { 
    9. 
  
  
  
  
  9.     console.log('我是第二個輸出的') 
    10. 
  
  
  
  
  10.   } 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12. export default { 
    13. 
  
  
  
  
  13.   mixins: [mixin1, mixin2], 
    14. 
  
  
  
  
  14.   created() { 
    15. 
  
  
  
  
  15.     console.log('我是第三個輸出的') 
    16. 
  
  
  
  
  16.   } 
    17. 
  
  
  
  
  17. } 
    18.

其他選項(xiàng) 對于值為對象的選項(xiàng)，如methods,components,filter,directives,props等等，將被合并為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

全局混入
混入也可以進(jìn)行全局注冊。一旦使用全局混入，那么混入的選項(xiàng)將在所有的組件內(nèi)生效，如下代碼所示：

 
 
 
 
    
  
  
  
  
  1. Vue.mixin({ 
    2. 
  
  
  
  
  2.   methods: { 
    3. 
  
  
  
  
  3.     /** 
    4. 
  
  
  
  
  4.      * 將埋點(diǎn)方法通過全局混入添加到每個組件內(nèi)部 
    5. 
  
  
  
  
  5.      * 
    6. 
  
  
  
  
  6.      * 建議將埋點(diǎn)方法綁定到Vue的原型鏈上面，如：Vue.prototype.$track = () => {} 
    7. 
  
  
  
  
  7.      * */ 
    8. 
  
  
  
  
  8.     track(message) { 
    9. 
  
  
  
  
  9.       console.log(message) 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12. }) 
    13.

請謹(jǐn)慎使用全局混入，因?yàn)樗鼤绊懨總€單獨(dú)創(chuàng)建的 Vue 實(shí)例 (包括第三方組件)。大多數(shù)情況下，只應(yīng)當(dāng)應(yīng)用于自定義選項(xiàng)


名稱欄目：絕對干貨~！學(xué)會這些Vue小技巧
本文地址：http://www.dlmjj.cn/article/coopops.html