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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
詳解vue組件的三大核心概念

【稿件】前言

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都做網(wǎng)站、赤峰網(wǎng)絡(luò)推廣、小程序開發(fā)、赤峰網(wǎng)絡(luò)營(yíng)銷、赤峰企業(yè)策劃、赤峰品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供赤峰建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

本文主要介紹屬性、事件和插槽這三個(gè)vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件，也可以從這三個(gè)部分展開，它們可以幫助你快速了解一個(gè)組件的所有功能。

本文的代碼請(qǐng)猛戳github博客，紙上得來(lái)終覺(jué)淺，大家動(dòng)手多敲敲代碼！

一、屬性

1.自定義屬性props

prop 定義了這個(gè)組件有哪些可配置的屬性，組件的核心功能也都是它來(lái)確定的。寫通用組件時(shí)，props 最好用對(duì)象的寫法，這樣可以針對(duì)每個(gè)屬性設(shè)置類型、默認(rèn)值或自定義校驗(yàn)屬性的值，這點(diǎn)在組件開發(fā)中很重要，然而很多人卻忽視，直接使用 props 的數(shù)組用法，這樣的組件往往是不嚴(yán)謹(jǐn)?shù)摹?/p>

 
 
 
 
    
  
  
  
  
  1. // 父組件  
    2. 
  
  
  
  
  2.  
  
  
  
  
  3.            :type='type'  
    4. 
  
  
  
  
  4.            :is-visible="false"  
    5. 
  
  
  
  
  5.            :on-change="handlePropChange"  
    6. 
  
  
  
  
  6.            :list=[22,33,44]  
    7. 
  
  
  
  
  7.            title="屬性Demo"  
    8. 
  
  
  
  
  8.            class="test1"  
    9. 
  
  
  
  
  9.            :class="['test2']"  
    10. 
  
  
  
  
  10.            :style="{ marginTop: '20px' }" //注意:style 的優(yōu)先級(jí)是要高于 style  
    11. 
  
  
  
  
  11.            style="margin-top: 10px">  
    12. 
  
  
  
  
  12.     
    13. 
  
  
  
  
  13. // 子組件  
    14. 
  
  
  
  
  14.   props: { 
    15. 
  
  
  
  
  15.     name: String,  
    16. 
  
  
  
  
  16.     type: {  
    17. 
  
  
  
  
  17. 　  //從父級(jí)傳入的 type，它的值必須是指定的 'success', 'warning', 'danger'中的一個(gè)，如果傳入這三個(gè)以外的值，都會(huì)拋出一條警告  
    18. 
  
  
  
  
  18.       validator: (value) => {  
    19. 
  
  
  
  
  19.         return ['success', 'warning', 'danger'].includes(value)  
    20. 
  
  
  
  
  20.       }  
    21. 
  
  
  
  
  21.     }, 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23.     onChange: {  
    24. 
  
  
  
  
  24.     //對(duì)于接收的數(shù)據(jù)，可以是各種數(shù)據(jù)類型，同樣也可以傳遞一個(gè)函數(shù)  
    25. 
  
  
  
  
  25.       type: Function,  
    26. 
  
  
  
  
  26.       default: () => { }  
    27. 
  
  
  
  
  27.     },  
    28. 
  
  
  
  
  28.     isVisible: {  
    29. 
  
  
  
  
  29.       type: Boolean,  
    30. 
  
  
  
  
  30.       default: false  
    31. 
  
  
  
  
  31.     },  
    32. 
  
  
  
  
  32.     list: {  
    33. 
  
  
  
  
  33.       type: Array,  
    34. 
  
  
  
  
  34.       // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取  
    35. 
  
  
  
  
  35.       default: () => []  
    36. 
  
  
  
  
  36.     }  
    37. 
  
  
  
  
  37.   } 
    38.

從上面的例子中，可以得出props 可以顯示定義一個(gè)或一個(gè)以上的數(shù)據(jù)，對(duì)于接收的數(shù)據(jù)，可以是各種數(shù)據(jù)類型，同樣也可以傳遞一個(gè)函數(shù)。

2.inheritAttrs

這是2.4.0 新增的一個(gè)API，默認(rèn)情況下父作用域的不被認(rèn)作 props 的特性綁定將會(huì)“回退”且作為普通的 HTML 特性應(yīng)用在子組件的根元素上。可通過(guò)設(shè)置 inheritAttrs 為 false，這些默認(rèn)行為將會(huì)被去掉。注意：這個(gè)選項(xiàng)不影響 class 和 style 綁定。 上個(gè)例子中，title屬性沒(méi)有在子組件中props中聲明，就會(huì)默認(rèn)掛在子組件的根元素上，如下圖所示： 

3. data與props區(qū)別

  • 相同點(diǎn)

兩者選項(xiàng)里都可以存放各種類型的數(shù)據(jù)，當(dāng)行為操作改變時(shí)，所有行為操作所用到和模板所渲染的數(shù)據(jù)同時(shí)都會(huì)發(fā)生同步變化。

  • 不同點(diǎn)

data 被稱之為動(dòng)態(tài)數(shù)據(jù)，在各自實(shí)例中，在任何情況下，我們都可以隨意改變它的數(shù)據(jù)類型和數(shù)據(jù)結(jié)構(gòu)，不會(huì)被任何環(huán)境所影響。

props 被稱之為靜態(tài)數(shù)據(jù)，在各自實(shí)例中，一旦在初始化被定義好類型時(shí)，基于 Vue 是單向數(shù)據(jù)流，在數(shù)據(jù)傳遞時(shí)始終不能改變它的數(shù)據(jù)類型，而且不允許在子組件中直接操作傳遞過(guò)來(lái)的props數(shù)據(jù)，而是需要通過(guò)別的手段，改變傳遞源中的數(shù)據(jù)。至于如何改變，我們接下去詳細(xì)介紹。

4.單向數(shù)據(jù)流

這個(gè)概念出現(xiàn)在組件通信。props的數(shù)據(jù)都是通過(guò)父組件或者更高層級(jí)的組件數(shù)據(jù)或者字面量的方式進(jìn)行傳遞的，不允許直接操作改變各自實(shí)例中的props數(shù)據(jù)，而是需要通過(guò)別的手段，改變傳遞源中的數(shù)據(jù)。那如果有時(shí)候我們想修改傳遞過(guò)來(lái)的prop，有哪些辦法呢？

  • 方法1：過(guò)渡到 data 選項(xiàng)中

在子組件的 data 中拷貝一份 prop，data 是可以修改的 。

 
 
 
 
    
  
  
  
  
  1. export default {  
    2. 
  
  
  
  
  2.   props: {  
    3. 
  
  
  
  
  3.     type: String  
    4. 
  
  
  
  
  4.   }, 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.   data () {  
    7. 
  
  
  
  
  7.     return {  
    8. 
  
  
  
  
  8.       currentType: this.type  
    9. 
  
  
  
  
  9.     }  
    10. 
  
  
  
  
  10.   }  
    11. 
  
  
  
  
  11. } 
    12.

在 data 選項(xiàng)里通過(guò) currentType接收 props中type數(shù)據(jù)，相當(dāng)于對(duì) currentType= type進(jìn)行一個(gè)賦值操作，不僅拿到了 currentType的數(shù)據(jù)，而且也可以改變 currentType數(shù)據(jù)。

  • 方法2：利用計(jì)算屬性         
 
 
 
 
    
  
  
  
  
  1. export default {  
    2. 
  
  
  
  
  2.          props: {  
    3. 
  
  
  
  
  3.           type: String  
    4. 
  
  
  
  
  4.         }, 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.         computed: {  
    7. 
  
  
  
  
  7.           normalizedType: function () {  
    8. 
  
  
  
  
  8.              return this.type.toUpperCase();  
    9. 
  
  
  
  
  9.            }  
    10. 
  
  
  
  
  10.          }  
    11. 
  
  
  
  
  11. } 
    12.

以上兩種方法雖可以在子組件間接修改props的值，但如果子組件想修改數(shù)據(jù)并且同步更新到父組件，卻無(wú)濟(jì)于事。在一些情況下，我們可能會(huì)需要對(duì)一個(gè) prop 進(jìn)行『雙向綁定』，此時(shí)就推薦以下這兩種方法：

  • 方法3：使用.sync  
 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. // 父組件 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. // 子組件 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. // 子組件 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.  
    14.

值得注意：v-bind:style 的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來(lái)) 來(lái)命名。

2.新語(yǔ)法

在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 `v-slot` 指令)。它取代了 `slot` 和 `slot-scope` 。

我們通過(guò)一個(gè)例子介紹下默認(rèn)插槽、具名插槽和作用域插槽的新語(yǔ)法： 

 
 
 
 
    
  
  
  
  
  1. // 父組件  
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.         
    4. 
  
  
  
  
  4.         
    作用域插槽：item slot-scope {{ props }}
      
    5. 
  
  
  
  
  5.         
    6. 
  
  
  
  
  6.       
    7. 
  
  
  
  
  7.   
  
  •   
  •   
  •  
  •  
  • // 子組件  
  •   
  •    
  • ![slot](https://upload-images.jianshu.io/upload_images/3174701-1e0368524f073643.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  

    • 參考文章

    • 珠峰架構(gòu)課(強(qiáng)烈推薦)
    • Vue開發(fā)實(shí)戰(zhàn)
    • Vue.js 組件精講
    • Vue.js 官方文檔
    • Vue 組件通信全揭秘
    • vue修飾符--可能是東半球最詳細(xì)的文檔（滑稽）

    浪里行舟：碩士研究生，專注于前端。個(gè)人公眾號(hào)：「前端工匠」，致力于打造適合初中級(jí)工程師能夠快速吸收的一系列優(yōu)質(zhì)文章！

    【原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為.com】


    標(biāo)題名稱：詳解vue組件的三大核心概念
    文章地址：http://www.dlmjj.cn/article/dpspcph.html