【51CTO.com原創(chuàng)稿件】前言

本文主要介紹屬性、事件和插槽這三個(gè)vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件，也可以從這三個(gè)部分展開(kāi)，它們可以幫助你快速了解一個(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)在組件開(kāi)發(fā)中很重要，然而很多人卻忽視，直接使用 props 的數(shù)組用法，這樣的組件往往是不嚴(yán)謹(jǐn)?shù)摹?/p>

// 父組件  
 <props name='屬性'  
           :type='type'  
           :is-visible="false"  
           :on-change="handlePropChange"  
           :list=[22,33,44]  
           title="屬性Demo"  
           class="test1"  
           :class="['test2']"  
           :style="{ marginTop: '20px' }" //注意:style 的優(yōu)先級(jí)是要高于 style  
           style="margin-top: 10px">  
  </props>  
// 子組件  
  props: { 
    name: String,  
    type: {  
　  //從父級(jí)傳入的 type，它的值必須是指定的 'success', 'warning', 'danger'中的一個(gè)，如果傳入這三個(gè)以外的值，都會(huì)拋出一條警告  
      validator: (value) => {  
        return ['success', 'warning', 'danger'].includes(value)  
      }  
    }, 
 
    onChange: {  
    //對(duì)于接收的數(shù)據(jù)，可以是各種數(shù)據(jù)類型，同樣也可以傳遞一個(gè)函數(shù)  
      type: Function,  
      default: () => { }  
    },  
    isVisible: {  
      type: Boolean,  
      default: false  
    },  
    list: {  
      type: Array,  
      // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取  
      default: () => []  
    }  
  } 

從上面的例子中，可以得出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 是可以修改的 。

export default {  
  props: {  
    type: String  
  }, 
 
  data () {  
    return {  
      currentType: this.type  
    }  
  }  
} 

在 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ì)算屬性        
  

export default {  
         props: {  
          type: String  
        }, 
 
        computed: {  
          normalizedType: function () {  
             return this.type.toUpperCase();  
           }  
         }  
} 

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

• 方法3：使用.sync  

 
// 父組件 
<template> 
  <div class="hello"> 
    <div> 
      <p>父組件msg：{{ msg }}</p> 
      <p>父組件數(shù)組：{{ arr }}</p> 
    </div> 
    <button @click="show = true">打開(kāi)model框</button> 
    <br /> 
    <demo :show.sync="show" :msg.sync="msg" :arr="arr"></demo> 
  </div> 
</template> 
 
<script> 
import Demo from "./demo.vue"; 
export default { 
  name: "Hello", 
  components: { 
    Demo 
  }, 
  data() { 
    return { 
      show: false, 
      msg: "模擬一個(gè)model框", 
      arr: [1, 2, 3] 
    }; 
  } 
}; 
</script> 
 
// 子組件 
<template> 
  <div v-if="show" class="border"> 
    <div>子組件msg：{{ msg }}</div> 
    <div>子組件數(shù)組：{{ arr }}</div> 
    <button @click="closeModel">關(guān)閉model框</button> 
    <button @click="$emit('update:msg', '浪里行舟')"> 
      改變文字 
    </button> 
    <button @click="arr.push('前端工匠')">改變數(shù)組</button>  
  </div> 
</template> 
<script> 
export default { 
  props: { 
    msg: { 
      type: String 
    }, 
    show: { 
      type: Boolean 
    }, 
    arr: { 
      type: Array //在子組件中改變傳遞過(guò)來(lái)數(shù)組將會(huì)影響到父組件的狀態(tài) 
    } 
  }, 
  methods: { 
    closeModel() { 
      this.$emit("update:show", false); 
    } 
  } 
}; 
 
![props.gif](https://upload-images.jianshu.io/upload_images/3174701-389fadc8b85b4661.gif?imageMogr2/auto-orient/strip) 

父組件向子組件 props 里傳遞了 msg 和 show 兩個(gè)值，都用了.sync 修飾符，進(jìn)行雙向綁定。

• 方法4：將父組件中的數(shù)據(jù)包裝成對(duì)象傳遞給子組件

這是因?yàn)樵?JavaScript 中對(duì)象和數(shù)組是通過(guò)引用傳入的，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來(lái)說(shuō)，在子組件中改變這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。比如上例中在子組件中修改父組件傳遞過(guò)來(lái)的數(shù)組arr，從而改變父組件的狀態(tài)。

5.向子組件中傳遞數(shù)據(jù)時(shí)加和不加 v-bind?

對(duì)于字面量語(yǔ)法和動(dòng)態(tài)語(yǔ)法，初學(xué)者可能在父組件模板中向子組件中傳遞數(shù)據(jù)時(shí)到底加和不加 v-bind 會(huì)感覺(jué)迷惑。 

v-bind:msg = 'msg' 

這是通過(guò) v-bind 進(jìn)行傳遞數(shù)據(jù)并且傳遞的數(shù)據(jù)并不是一個(gè)字面量，雙引號(hào)里的解析的是一個(gè)表達(dá)式，同樣也可以是實(shí)例上定義的數(shù)據(jù)和方法(其實(shí)就是引用一個(gè)變量)。 

msg='浪里行舟' 

這種在沒(méi)有 v-bind 的模式下只能傳遞一個(gè)字面量，這個(gè)字面量只限于 String 類量，字符串類型。那如果想通過(guò)字面量進(jìn)行數(shù)據(jù)傳遞時(shí)，**如果想傳遞非String類型，必須props名前要加上v-bind**，內(nèi)部通過(guò)實(shí)例尋找，如果實(shí)例方?jīng)]有此屬性和方法，則默認(rèn)為對(duì)應(yīng)的數(shù)據(jù)類型。

:msg='11111' //Number  
:msg='true' //Bootlean  
:msg='()=>{console.log(1)}' //Function 
:msg='{a:1}' //Object ``` 

二、事件

1.事件驅(qū)動(dòng)與數(shù)據(jù)驅(qū)動(dòng)

用原生JavaScript事件驅(qū)動(dòng)通常是這樣的流程：

• 先通過(guò)特定的選擇器查找到需要操作的節(jié)點(diǎn) -> 給節(jié)點(diǎn)添加相應(yīng)的事件監(jiān)聽(tīng)
• 然后用戶執(zhí)行某事件(點(diǎn)擊，輸入，后退等等) -> 調(diào)用 JavaScript 來(lái)修改節(jié)點(diǎn)

這種模式對(duì)業(yè)務(wù)來(lái)說(shuō)是沒(méi)有什么問(wèn)題，但是從開(kāi)發(fā)成本和效率來(lái)說(shuō)會(huì)比較不理想，特別是在業(yè)務(wù)系統(tǒng)越來(lái)越龐大的時(shí)候。另一方面，找節(jié)點(diǎn)和修改節(jié)點(diǎn)這件事，效率本身就很低，因此出現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)模式。

Vue的一個(gè)核心思想是數(shù)據(jù)驅(qū)動(dòng)。所謂數(shù)據(jù)驅(qū)動(dòng)，是指視圖是由數(shù)據(jù)驅(qū)動(dòng)生成的，我們對(duì)視圖的修改，不會(huì)直接操作 DOM，而是通過(guò)修改數(shù)據(jù)，其流程如下：

用戶執(zhí)行某個(gè)操作 -> 反饋到 VM 處理(可以導(dǎo)致 Model 變動(dòng)) -> VM 層改變，通過(guò)綁定關(guān)系直接更新頁(yè)面對(duì)應(yīng)位置的數(shù)據(jù)

可以簡(jiǎn)單地理解：數(shù)據(jù)驅(qū)動(dòng)不是操作節(jié)點(diǎn)的，而是通過(guò)虛擬的抽象數(shù)據(jù)層來(lái)直接更新頁(yè)面。主要就是因?yàn)檫@一點(diǎn)，數(shù)據(jù)驅(qū)動(dòng)框架才得以有較快的運(yùn)行速度(因?yàn)椴恍枰フ垓v節(jié)點(diǎn))，并且可以應(yīng)用到大型項(xiàng)目。

2.修飾符事件

Vue事件分為普通事件和修飾符事件，這里我們主要介紹修飾符事件。

Vue 提供了大量的修飾符封裝了這些過(guò)濾和判斷，讓開(kāi)發(fā)者少寫代碼，把時(shí)間都投入到業(yè)務(wù)、邏輯上，只需要通過(guò)一個(gè)修飾符去調(diào)用。我們先來(lái)思考這樣問(wèn)題：怎樣給這個(gè)自定義組件 custom-component 綁定一個(gè)原生的 click 事件? 

<custom-component>組件內(nèi)容</custom-component>  

如果你的回答是``，那就錯(cuò)了。這里的 @click 是自定義事件 click，并不是原生事件 click。綁定原生的 click 是這樣的： 

<custom-component @click.native="xxx">組件內(nèi)容</custom-component>  

實(shí)際開(kāi)發(fā)過(guò)程中離不開(kāi)事件修飾符，常見(jiàn)事件修飾符有以下這些：

- 表單修飾符

1).lazy

在默認(rèn)情況下，`v-model` 在每次 `input` 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 。你可以添加 `lazy` 修飾符，從而轉(zhuǎn)變?yōu)槭褂? `change`事件進(jìn)行同步。適用于輸入完所有內(nèi)容后，光標(biāo)離開(kāi)才更新視圖的場(chǎng)景。

2).trim

如果要自動(dòng)過(guò)濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符： 

<input v-model.trim="msg">  

這個(gè)修飾符可以過(guò)濾掉輸入完密碼不小心多敲了一下空格的場(chǎng)景。需要注意的是，**它只能過(guò)濾首尾的空格**!首尾，中間的是不會(huì)過(guò)濾的。

3).number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符: 

<input v-model.number="value" type="text" /> ``` 
![number.gif](https://upload-images.jianshu.io/upload_images/3174701-0bd73cd43bf64ce1.gif?imageMogr2/auto-orient/strip)  

從上面例子，可以得到如果你先輸入數(shù)字，那它就會(huì)限制你輸入的只能是數(shù)字。如果你先輸入字符串，那它就相當(dāng)于沒(méi)有加.number

- 事件修飾符 

<!-- 阻止單擊事件繼續(xù)傳播 --> 
<a v-on:click.stop="doThis"></a> 
 
<!-- 提交事件不再重載頁(yè)面 --> 
<form v-on:submit.prevent="onSubmit"></form> 
 
<!-- 修飾符可以串聯(lián) --> 
<a v-on:click.stop.prevent="doThat"></a>  

三、插槽

插槽分為普通插槽和作用域插槽，其實(shí)兩者很類似，只不過(guò)作用域插槽可以接受子組件傳遞過(guò)來(lái)的參數(shù)。

1.作用域插槽

我們不妨通過(guò)一個(gè)todolist的例子來(lái)了解作用域插槽。如果當(dāng)item選中后，文字變?yōu)辄S色(如下圖所示)，該如何實(shí)現(xiàn)呢? 

![slot.gif](https://upload-images.jianshu.io/upload_images/3174701-b5ebab9122420e40.gif?imageMogr2/auto-orient/strip)  
 
// 父組件 
<template> 
  <div class="toList"> 
    <input v-model="info" type="text" /> <button @click="addItem">添加</button> 
    <ul> 
      <TodoItem v-for="(item, index) in listData" :key="index"> 
        <template v-slot:item="itemProps"> // 這是個(gè)具名插槽 
        // 其中itemProps的值就是子組件傳遞過(guò)來(lái)的對(duì)象 
          <span 
            :style="{ 
              fontSize: '20px', 
              color: itemProps.checked ? 'yellow' : 'blue' 
            }" 
            >{{ item }}</span 
          > 
        </template> 
      </TodoItem> 
    </ul> 
  </div> 
</template> 
<script> 
import TodoItem from "./TodoItem"; 
export default { 
  components: { 
    TodoItem 
  }, 
  data() { 
    return { 
      info: "", 
      listData: [] 
    }; 
  }, 
  methods: { 
    addItem() { 
      this.listData.push(this.info); 
      this.info = ""; 
    } 
  } 
}; 
</script> 
 
// 子組件 
<template> 
  <div> 
    <li class="item"> 
      <input v-model="checked" type="checkbox" /> 
      <slot name="item" :checked="checked"></slot> // 將checked的值傳遞給父組件 
    </li> 
  </div> 
</template> 
<script> 
export default { 
  data() { 
    return { 
      checked: false 
    }; 
  } 
}; 
</script> 

值得注意：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ǔ)法： 

// 父組件  
<template>  
  <div class="helloSlot">  
    <h2>2.6 新語(yǔ)法</h2>  
    <SlotDemo>  
      <p>默認(rèn)插槽：default slot</p>  
      <template v-slot:title>  
        <p>具名插槽：title slot1</p>  
        <p>具名插槽：title slot2</p>  
      </template>  
      <template v-slot:item="props">  
        <p>作用域插槽：item slot-scope {{ props }}</p>  
      </template>  
    </SlotDemo>  
  </div>  
</template>  
<script>  
import Slot from "./slot";  
export default {  
  components: {  
    SlotDemo: Slot  
  }  
};  
</script>  
 
 
// 子組件  
<template>  
  <div>  
    <slot />  
    <slot name="title" />  
    <slot name="item" :propData="propData" />  
  </div>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      propData: {  
        value: "浪里行舟"  
      }  
    };  
  }  
};  
</script>   
![slot](https://upload-images.jianshu.io/upload_images/3174701-1e0368524f073643.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  

參考文章

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

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

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