使用mpvue開(kāi)發(fā)小程序教程（四）

我們將vue-cli命令行工具生成的代碼骨架中的src目錄清理了一遍循衰，然后從頭開(kāi)始配置和編寫(xiě)了一個(gè)可以運(yùn)行的小程序頁(yè)面转砖，算是正真走上了使用mpvue開(kāi)發(fā)小程序的第一步。今天我們將進(jìn)一步來(lái)了解和學(xué)習(xí)mpvue / Vue的其他重要功能惊来。

image

既然mpvue是基于Vue的屑墨，那么就沒(méi)有理由不進(jìn)一步學(xué)習(xí)一下Vue最核心的東西：組件。組件系統(tǒng)是Vue應(yīng)用開(kāi)發(fā)中最具價(jià)值的特性之一疾层，在前文中其實(shí)我們就已經(jīng)有在使用組件了将饺，比如App.vue和首頁(yè)index.vue就是兩個(gè)Vue組件。

組件是一種抽象痛黎，允許我們使用小型予弧、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用湖饱。仔細(xì)想想掖蛤，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹(shù)，若干的小組件可以聚合成一個(gè)完整的界面：

image

一個(gè)好的組件系統(tǒng)一定會(huì)有這些特點(diǎn)：封裝性井厌、復(fù)用性蚓庭、擴(kuò)展性致讥。對(duì)于Vue的組件來(lái)說(shuō)，這幾點(diǎn)都算是實(shí)現(xiàn)的比較的優(yōu)秀的器赞。

組件的封裝性

Vue組件的寫(xiě)法可以避免將屬于一個(gè)獨(dú)立邏輯單位的代碼散落在各處垢袱，可以將界面（DOM）、樣式（CSS）港柜、行為（JS）三部分的代碼很好的組織在一起（推薦的實(shí)踐是使用.vue文件）请契。在設(shè)計(jì)編寫(xiě)一個(gè)組件時(shí)，我們要記住的原則就是：

避免向外部暴露過(guò)多的東西夏醉，只暴露必要的外部交互接口（組件屬性爽锥、事件、方法等）畔柔。

下面我們來(lái)在原先的代碼基礎(chǔ)上救恨，創(chuàng)建一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊計(jì)數(shù)器組件，它將實(shí)現(xiàn)的功能是：點(diǎn)擊按鈕并展示已點(diǎn)擊按鈕次數(shù)释树、點(diǎn)擊清零按鈕實(shí)現(xiàn)點(diǎn)擊次數(shù)的歸零肠槽。在src/components目錄下，新建一個(gè)click-counter.vue組件文件奢啥，并編寫(xiě)如下代碼：

<template>
  <div class="click-counter">
    <div class="counter-num">次數(shù)：{{num}}</div>
    <button class="counter-btn" @click="handleClick">點(diǎn)我呀秸仙！</button>
    <button class="counter-reset-btn" @click="handleResetClick">清零</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    };
  },

  methods: {
    handleClick() {
      this.num += 1;
    },
    handleResetClick() {
      this.num = 0;
    }
  }
};
</script>

<style>
.click-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  background-color: #ffffff;
  padding: 10px;
}

.counter-num,
.counter-btn,
.counter-reset-btn {
  flex: 1;
  margin: 3px;
}
</style>

編寫(xiě)完這個(gè)組件后，我們來(lái)嘗試在首頁(yè)組件src/pages/index/index.vue文件中使用它：

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 使用 click-counter 組件 -->
    <click-counter />
  </div>
</template>

<script>
// 導(dǎo)入 click-counter 組件
import ClickCounter from "@/components/click-counter";

export default {
  // 聲明在當(dāng)前組件下使用 counter-click 組件
  components: { ClickCounter },

  data() {
    return {
      msg: "Hello"
    };
  },

  methods: {
    clickHandle() {
      this.msg = "Clicked!!!!!!";
    }
  }
};
</script>

<style scoped>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>

完成上面兩個(gè)步驟后桩盲，記得重新運(yùn)行一下命令行npm run dev（注意點(diǎn)：新增文件必須重新運(yùn)行該命令寂纪，編譯器不會(huì)自動(dòng)檢測(cè)新加入的文件）。成功后通過(guò)微信開(kāi)發(fā)者工具的模擬器查看赌结，結(jié)果界面將會(huì)是這樣的：

image

點(diǎn)擊“點(diǎn)我呀捞蛋！”按鈕，計(jì)數(shù)器就會(huì)累加點(diǎn)擊次數(shù)并更新界面上的數(shù)字柬姚；而點(diǎn)擊“清零”按鈕拟杉，則會(huì)將統(tǒng)計(jì)數(shù)字歸零。

回到代碼上來(lái)看量承，對(duì)于click-counter.vue的使用者index.vue來(lái)說(shuō)搬设，它并不關(guān)心太多click-counter.vue的實(shí)現(xiàn)細(xì)節(jié)，引入該組件文件并進(jìn)行聲明撕捍，就可以通過(guò)標(biāo)簽的形式來(lái)使用它了拿穴，非常簡(jiǎn)單明了。而且忧风，這樣一個(gè)click-counter.vue組件也可以被拿到其他的Vue/mpvue代碼中使用默色，其他使用者也并不需要關(guān)注它的實(shí)現(xiàn)細(xì)節(jié)，而只需要關(guān)心它能實(shí)現(xiàn)什么功能就行了狮腿。這就是組件封裝帶來(lái)的好處腿宰。

不過(guò)弟蚀，目前的這個(gè)click-counter組件還沒(méi)有跟它的父組件之間有什么交互或通信，沒(méi)有體現(xiàn)出“暴露接口”的特性酗失，那讓我們來(lái)增加點(diǎn)代碼义钉，了解下這一特性。首先解釋一下我們要實(shí)現(xiàn)的功能：組件可以接收一個(gè)外部設(shè)置的初始點(diǎn)擊次數(shù)值规肴，在點(diǎn)擊“點(diǎn)我呀捶闸！”按鈕的時(shí)候，從這個(gè)初始值開(kāi)始進(jìn)行累加拖刃；并且點(diǎn)擊按鈕后删壮，可以通知組件的使用者（即父組件）當(dāng)前的點(diǎn)擊統(tǒng)計(jì)值。

修改click-counter.vue的代碼：

<template>
  <div class="click-counter">
    <div class="counter-num">次數(shù)：{{num}}</div>
    <button class="counter-btn" @click="handleClick">點(diǎn)我呀兑牡！</button>
    <button class="counter-reset-btn" @click="handleResetClick">清零</button>
  </div>
</template>

<script>
export default {
  // 增加一個(gè)可從外部傳入的屬性initNum
  props: {
    initNum: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      num: this.initNum //使用傳入的initNum值作為初始的點(diǎn)擊數(shù)
    };
  },

  methods: {
    handleClick() {
      this.num += 1;
      this.notifyNum();
    },
    handleResetClick() {
      this.num = 0;
      this.notifyNum();
    },
    notifyNum() {
      //觸發(fā)自定義事件 clicknum
      this.$emit("clicknum", {
        num: this.num
      });
    }
  }
};
</script>

<style scoped>
.click-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  background-color: #ffffff;
  padding: 10px;
}

.counter-num,
.counter-btn,
.counter-reset-btn {
  flex: 1;
  margin: 3px;
}
</style>

修改index.vue的代碼：

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 使用 click-counter 組件 -->
    <click-counter :init-num="10" @clicknum="handleClickNum" />
  </div>
</template>

<script>
// 導(dǎo)入 click-counter 組件
import ClickCounter from "@/components/click-counter";

export default {
  // 聲明在當(dāng)前組件下使用 counter-click 組件
  components: { ClickCounter },

  data() {
    return {
      msg: "Hello"
    };
  },

  methods: {
    clickHandle() {
      this.msg = "Clicked!!!!!!";
    },
    handleClickNum(data) {
      console.log(">>>>>>", data.num);
    }
  }
};
</script>

<style scoped>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>

觀察以上修改后的代碼可以發(fā)現(xiàn)央碟，在click-couter.vue中的主要變化是：

  1. 使用props定義了一個(gè)名為initNum的數(shù)字型組件屬性（且初始值為0）。它可用于接收使用組件外部傳入的值均函。然后亿虽，這個(gè)initNum值被賦值到data中的屬性num上作為它的初始值。

  2. 在兩個(gè)按鈕的click事件處理方法中苞也，額外調(diào)用了一個(gè)notifyNum()方法洛勉，它向組件觸發(fā)了一個(gè)自定義事件clicknum并攜帶了當(dāng)前點(diǎn)擊次數(shù)值。

而在index.vue中的主要變化是實(shí)例化click-counter組件的這行代碼：

<click-counter :init-num="10" @clicknum="handleClickNum" />

實(shí)例化組件的時(shí)候如迟，為組件傳入了initNum屬性值10收毫；并且添加了一個(gè)對(duì)自定義事件clicknum的監(jiān)聽(tīng)方法。

這樣一個(gè)結(jié)構(gòu)實(shí)現(xiàn)了數(shù)據(jù)進(jìn)入組件/數(shù)據(jù)傳出組件的機(jī)制殷勘，父子組件之間就能實(shí)現(xiàn)數(shù)據(jù)通信此再。通過(guò)有限的通信點(diǎn)進(jìn)行數(shù)據(jù)互換，而不是直接進(jìn)行函數(shù)調(diào)用玲销，可以使得代碼結(jié)構(gòu)更優(yōu)雅输拇、更易維護(hù)。

組件的復(fù)用性

組件的復(fù)用性就好理解的多了痒玩，創(chuàng)建組件的目的淳附，大多數(shù)時(shí)候就是希望這個(gè)組件可以被多個(gè)地方、多次使用蠢古，避免編寫(xiě)重復(fù)的代碼。比如我們前面的計(jì)數(shù)器組件别凹，有可能一個(gè)項(xiàng)目中的多個(gè)頁(yè)面會(huì)用到草讶，也可能一個(gè)頁(yè)面就會(huì)使用多次。

Vue組件的復(fù)用也是很容易的炉菲，比如我們要在前面例子中的index.vue中復(fù)用計(jì)數(shù)器組件堕战，創(chuàng)建3個(gè)計(jì)數(shù)器坤溃，那么直接在模板部分編寫(xiě)3個(gè)標(biāo)簽就行了:

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 創(chuàng)建 3個(gè) click-counter 組件 -->
    <click-counter :init-num="10" @clicknum="handleClickNum" />
    <click-counter :init-num="20" @clicknum="handleClickNum" />
    <click-counter :init-num="30" @clicknum="handleClickNum" />
  </div>
</template>

運(yùn)行后的效果如下圖所示，這三個(gè)計(jì)數(shù)器都能獨(dú)立統(tǒng)計(jì)各自的點(diǎn)擊數(shù)量：

image

組件的擴(kuò)展性

談到擴(kuò)展性嘱丢，有面向?qū)ο缶幊探?jīng)驗(yàn)的開(kāi)發(fā)者就會(huì)想到“繼承(extends)”薪介。繼承是一種比較有效的擴(kuò)展機(jī)制，不過(guò)隨著繼承的層次變深越驻，代碼也會(huì)變得難以理解汁政。在Vue組件中，沒(méi)有采用繼承的機(jī)制缀旁，而是推薦使用“組合”的方式记劈。

在組合理念下，我們盡量將想復(fù)用性高的組件設(shè)計(jì)到最小可拆分單位并巍，比如按鈕目木、輸入框、單選框等等懊渡，然后再將這些低層組件放入更高層組件中刽射，一層一層，慢慢拼裝出滿足需求的業(yè)務(wù)界面剃执。

除了組合柄冲，Vue組件還提供了插槽(Slot)功能，相當(dāng)于在一個(gè)組件中挖出了一個(gè)或多個(gè)坑忠蝗，在具體使用這些具有插槽的組件時(shí)现横，可以選擇往坑里面填什么內(nèi)容（其他組件）。

舉個(gè)例子阁最，在計(jì)數(shù)器組件中戒祠，我們?cè)谇辶惆粹o后面用<slot></slot>挖了一個(gè)坑：

<template>
  <div class="click-counter">
    <div class="counter-num">次數(shù)：{{num}}</div>
    <button class="counter-btn" @click="handleClick">點(diǎn)我呀！</button>
    <button class="counter-reset-btn" @click="handleResetClick">清零</button>
    <slot></slot>
  </div>
</template>

而后速种，在index.vue中使用計(jì)數(shù)器組件時(shí)姜盈，在<click-counter>標(biāo)簽體中放入了額外的內(nèi)容，會(huì)被傳入該組件中去用于填坑：

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 使用 click-counter 組件 -->
    <click-counter :init-num="10" @clicknum="handleClickNum">
      <!-- 填坑用... -->
      <input type="checkbox" /> 禁用
    </click-counter>
  </div>
</template>

從運(yùn)行結(jié)果可以看到配阵，清零按鈕后面已經(jīng)多出了我們傳入的復(fù)選框和文字內(nèi)容:

image

插槽其實(shí)可以理解為是另一種形式的組件屬性：普通組件屬性傳入的是比較簡(jiǎn)單類型的數(shù)據(jù)馏颂；而插槽傳入的可以是更復(fù)雜的界面組件而已。

小結(jié)

本文我們初步學(xué)習(xí)了一下Vue組件的相關(guān)理念和特性棋傍，希望大家花點(diǎn)時(shí)間去熟悉和掌握這些比較核心的知識(shí)點(diǎn)救拉，相信不管在之后使用Vue進(jìn)行Web應(yīng)用開(kāi)發(fā)，還是mpvue小程序開(kāi)發(fā)瘫拣，都會(huì)更加得心應(yīng)手亿絮、事半功倍的！

作者：一斤代碼
鏈接：http://www.reibang.com/p/32997f74c828
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)派昧，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處黔姜。
="utf-8">

我們將vue-cli命令行工具生成的代碼骨架中的src目錄清理了一遍，然后從頭開(kāi)始配置和編寫(xiě)了一個(gè)可以運(yùn)行的小程序頁(yè)面蒂萎，算是正真走上了使用mpvue開(kāi)發(fā)小程序的第一步秆吵。今天我們將進(jìn)一步來(lái)了解和學(xué)習(xí)mpvue / Vue的其他重要功能。

image

既然mpvue是基于Vue的五慈，那么就沒(méi)有理由不進(jìn)一步學(xué)習(xí)一下Vue最核心的東西：組件纳寂。組件系統(tǒng)是Vue應(yīng)用開(kāi)發(fā)中最具價(jià)值的特性之一，在前文中其實(shí)我們就已經(jīng)有在使用組件了豺撑，比如App.vue和首頁(yè)index.vue就是兩個(gè)Vue組件烈疚。

組件是一種抽象，允許我們使用小型聪轿、獨(dú)立和通骋危可復(fù)用的組件構(gòu)建大型應(yīng)用。仔細(xì)想想陆错，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹(shù)灯抛，若干的小組件可以聚合成一個(gè)完整的界面：

image

一個(gè)好的組件系統(tǒng)一定會(huì)有這些特點(diǎn)：封裝性、復(fù)用性音瓷、擴(kuò)展性对嚼。對(duì)于Vue的組件來(lái)說(shuō)，這幾點(diǎn)都算是實(shí)現(xiàn)的比較的優(yōu)秀的绳慎。

組件的封裝性

Vue組件的寫(xiě)法可以避免將屬于一個(gè)獨(dú)立邏輯單位的代碼散落在各處纵竖，可以將界面（DOM）、樣式（CSS）杏愤、行為（JS）三部分的代碼很好的組織在一起（推薦的實(shí)踐是使用.vue文件）靡砌。在設(shè)計(jì)編寫(xiě)一個(gè)組件時(shí)，我們要記住的原則就是：

避免向外部暴露過(guò)多的東西珊楼，只暴露必要的外部交互接口（組件屬性通殃、事件、方法等）厕宗。

下面我們來(lái)在原先的代碼基礎(chǔ)上画舌，創(chuàng)建一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊計(jì)數(shù)器組件，它將實(shí)現(xiàn)的功能是：點(diǎn)擊按鈕并展示已點(diǎn)擊按鈕次數(shù)已慢、點(diǎn)擊清零按鈕實(shí)現(xiàn)點(diǎn)擊次數(shù)的歸零曲聂。在src/components目錄下，新建一個(gè)click-counter.vue組件文件蛇受，并編寫(xiě)如下代碼：

<template>
  <div class="click-counter">
    <div class="counter-num">次數(shù)：{{num}}</div>
    <button class="counter-btn" @click="handleClick">點(diǎn)我呀句葵！</button>
    <button class="counter-reset-btn" @click="handleResetClick">清零</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    };
  },

  methods: {
    handleClick() {
      this.num += 1;
    },
    handleResetClick() {
      this.num = 0;
    }
  }
};
</script>

<style>
.click-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  background-color: #ffffff;
  padding: 10px;
}

.counter-num,
.counter-btn,
.counter-reset-btn {
  flex: 1;
  margin: 3px;
}
</style>

編寫(xiě)完這個(gè)組件后厕鹃，我們來(lái)嘗試在首頁(yè)組件src/pages/index/index.vue文件中使用它：

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 使用 click-counter 組件 -->
    <click-counter />
  </div>
</template>

<script>
// 導(dǎo)入 click-counter 組件
import ClickCounter from "@/components/click-counter";

export default {
  // 聲明在當(dāng)前組件下使用 counter-click 組件
  components: { ClickCounter },

  data() {
    return {
      msg: "Hello"
    };
  },

  methods: {
    clickHandle() {
      this.msg = "Clicked!!!!!!";
    }
  }
};
</script>

<style scoped>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>

完成上面兩個(gè)步驟后兢仰，記得重新運(yùn)行一下命令行npm run dev（注意點(diǎn)：新增文件必須重新運(yùn)行該命令乍丈，編譯器不會(huì)自動(dòng)檢測(cè)新加入的文件）。成功后通過(guò)微信開(kāi)發(fā)者工具的模擬器查看把将，結(jié)果界面將會(huì)是這樣的：

image

點(diǎn)擊“點(diǎn)我呀轻专！”按鈕，計(jì)數(shù)器就會(huì)累加點(diǎn)擊次數(shù)并更新界面上的數(shù)字察蹲；而點(diǎn)擊“清零”按鈕请垛，則會(huì)將統(tǒng)計(jì)數(shù)字歸零。

回到代碼上來(lái)看洽议，對(duì)于click-counter.vue的使用者index.vue來(lái)說(shuō)宗收，它并不關(guān)心太多click-counter.vue的實(shí)現(xiàn)細(xì)節(jié)，引入該組件文件并進(jìn)行聲明亚兄，就可以通過(guò)標(biāo)簽的形式來(lái)使用它了混稽，非常簡(jiǎn)單明了。而且审胚，這樣一個(gè)click-counter.vue組件也可以被拿到其他的Vue/mpvue代碼中使用匈勋，其他使用者也并不需要關(guān)注它的實(shí)現(xiàn)細(xì)節(jié)，而只需要關(guān)心它能實(shí)現(xiàn)什么功能就行了膳叨。這就是組件封裝帶來(lái)的好處洽洁。

不過(guò)，目前的這個(gè)click-counter組件還沒(méi)有跟它的父組件之間有什么交互或通信菲嘴，沒(méi)有體現(xiàn)出“暴露接口”的特性饿自，那讓我們來(lái)增加點(diǎn)代碼，了解下這一特性龄坪。首先解釋一下我們要實(shí)現(xiàn)的功能：組件可以接收一個(gè)外部設(shè)置的初始點(diǎn)擊次數(shù)值昭雌，在點(diǎn)擊“點(diǎn)我呀！”按鈕的時(shí)候悉默，從這個(gè)初始值開(kāi)始進(jìn)行累加城豁；并且點(diǎn)擊按鈕后，可以通知組件的使用者（即父組件）當(dāng)前的點(diǎn)擊統(tǒng)計(jì)值抄课。

修改click-counter.vue的代碼：

<template>
  <div class="click-counter">
    <div class="counter-num">次數(shù)：{{num}}</div>
    <button class="counter-btn" @click="handleClick">點(diǎn)我呀唱星！</button>
    <button class="counter-reset-btn" @click="handleResetClick">清零</button>
  </div>
</template>

<script>
export default {
  // 增加一個(gè)可從外部傳入的屬性initNum
  props: {
    initNum: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      num: this.initNum //使用傳入的initNum值作為初始的點(diǎn)擊數(shù)
    };
  },

  methods: {
    handleClick() {
      this.num += 1;
      this.notifyNum();
    },
    handleResetClick() {
      this.num = 0;
      this.notifyNum();
    },
    notifyNum() {
      //觸發(fā)自定義事件 clicknum
      this.$emit("clicknum", {
        num: this.num
      });
    }
  }
};
</script>

<style scoped>
.click-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  background-color: #ffffff;
  padding: 10px;
}

.counter-num,
.counter-btn,
.counter-reset-btn {
  flex: 1;
  margin: 3px;
}
</style>

修改index.vue的代碼：

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 使用 click-counter 組件 -->
    <click-counter :init-num="10" @clicknum="handleClickNum" />
  </div>
</template>

<script>
// 導(dǎo)入 click-counter 組件
import ClickCounter from "@/components/click-counter";

export default {
  // 聲明在當(dāng)前組件下使用 counter-click 組件
  components: { ClickCounter },

  data() {
    return {
      msg: "Hello"
    };
  },

  methods: {
    clickHandle() {
      this.msg = "Clicked!!!!!!";
    },
    handleClickNum(data) {
      console.log(">>>>>>", data.num);
    }
  }
};
</script>

<style scoped>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>

觀察以上修改后的代碼可以發(fā)現(xiàn)，在click-couter.vue中的主要變化是：

  1. 使用props定義了一個(gè)名為initNum的數(shù)字型組件屬性（且初始值為0）跟磨。它可用于接收使用組件外部傳入的值间聊。然后，這個(gè)initNum值被賦值到data中的屬性num上作為它的初始值抵拘。

  2. 在兩個(gè)按鈕的click事件處理方法中哎榴，額外調(diào)用了一個(gè)notifyNum()方法，它向組件觸發(fā)了一個(gè)自定義事件clicknum并攜帶了當(dāng)前點(diǎn)擊次數(shù)值。

而在index.vue中的主要變化是實(shí)例化click-counter組件的這行代碼：

<click-counter :init-num="10" @clicknum="handleClickNum" />

實(shí)例化組件的時(shí)候尚蝌，為組件傳入了initNum屬性值10迎变；并且添加了一個(gè)對(duì)自定義事件clicknum的監(jiān)聽(tīng)方法。

這樣一個(gè)結(jié)構(gòu)實(shí)現(xiàn)了數(shù)據(jù)進(jìn)入組件/數(shù)據(jù)傳出組件的機(jī)制飘言，父子組件之間就能實(shí)現(xiàn)數(shù)據(jù)通信衣形。通過(guò)有限的通信點(diǎn)進(jìn)行數(shù)據(jù)互換，而不是直接進(jìn)行函數(shù)調(diào)用姿鸿，可以使得代碼結(jié)構(gòu)更優(yōu)雅谆吴、更易維護(hù)。

組件的復(fù)用性

組件的復(fù)用性就好理解的多了苛预，創(chuàng)建組件的目的句狼，大多數(shù)時(shí)候就是希望這個(gè)組件可以被多個(gè)地方、多次使用热某，避免編寫(xiě)重復(fù)的代碼腻菇。比如我們前面的計(jì)數(shù)器組件，有可能一個(gè)項(xiàng)目中的多個(gè)頁(yè)面會(huì)用到苫拍，也可能一個(gè)頁(yè)面就會(huì)使用多次芜繁。

Vue組件的復(fù)用也是很容易的，比如我們要在前面例子中的index.vue中復(fù)用計(jì)數(shù)器組件绒极，創(chuàng)建3個(gè)計(jì)數(shù)器骏令，那么直接在模板部分編寫(xiě)3個(gè)標(biāo)簽就行了:

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 創(chuàng)建 3個(gè) click-counter 組件 -->
    <click-counter :init-num="10" @clicknum="handleClickNum" />
    <click-counter :init-num="20" @clicknum="handleClickNum" />
    <click-counter :init-num="30" @clicknum="handleClickNum" />
  </div>
</template>

運(yùn)行后的效果如下圖所示，這三個(gè)計(jì)數(shù)器都能獨(dú)立統(tǒng)計(jì)各自的點(diǎn)擊數(shù)量：

image

組件的擴(kuò)展性

談到擴(kuò)展性垄提，有面向?qū)ο缶幊探?jīng)驗(yàn)的開(kāi)發(fā)者就會(huì)想到“繼承(extends)”榔袋。繼承是一種比較有效的擴(kuò)展機(jī)制，不過(guò)隨著繼承的層次變深铡俐，代碼也會(huì)變得難以理解凰兑。在Vue組件中，沒(méi)有采用繼承的機(jī)制审丘，而是推薦使用“組合”的方式吏够。

在組合理念下，我們盡量將想復(fù)用性高的組件設(shè)計(jì)到最小可拆分單位滩报，比如按鈕锅知、輸入框、單選框等等脓钾，然后再將這些低層組件放入更高層組件中售睹，一層一層，慢慢拼裝出滿足需求的業(yè)務(wù)界面可训。

除了組合昌妹，Vue組件還提供了插槽(Slot)功能捶枢，相當(dāng)于在一個(gè)組件中挖出了一個(gè)或多個(gè)坑，在具體使用這些具有插槽的組件時(shí)飞崖，可以選擇往坑里面填什么內(nèi)容（其他組件）烂叔。

舉個(gè)例子，在計(jì)數(shù)器組件中蚜厉，我們?cè)谇辶惆粹o后面用<slot></slot>挖了一個(gè)坑：

<template>
  <div class="click-counter">
    <div class="counter-num">次數(shù)：{{num}}</div>
    <button class="counter-btn" @click="handleClick">點(diǎn)我呀长已！</button>
    <button class="counter-reset-btn" @click="handleResetClick">清零</button>
    <slot></slot>
  </div>
</template>

而后畜眨，在index.vue中使用計(jì)數(shù)器組件時(shí)昼牛，在<click-counter>標(biāo)簽體中放入了額外的內(nèi)容，會(huì)被傳入該組件中去用于填坑：

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
    <!-- 使用 click-counter 組件 -->
    <click-counter :init-num="10" @clicknum="handleClickNum">
      <!-- 填坑用... -->
      <input type="checkbox" /> 禁用
    </click-counter>
  </div>
</template>

從運(yùn)行結(jié)果可以看到康聂，清零按鈕后面已經(jīng)多出了我們傳入的復(fù)選框和文字內(nèi)容:

image

插槽其實(shí)可以理解為是另一種形式的組件屬性：普通組件屬性傳入的是比較簡(jiǎn)單類型的數(shù)據(jù)贰健；而插槽傳入的可以是更復(fù)雜的界面組件而已。

小結(jié)

本文我們初步學(xué)習(xí)了一下Vue組件的相關(guān)理念和特性恬汁，希望大家花點(diǎn)時(shí)間去熟悉和掌握這些比較核心的知識(shí)點(diǎn)伶椿，相信不管在之后使用Vue進(jìn)行Web應(yīng)用開(kāi)發(fā)，還是mpvue小程序開(kāi)發(fā)氓侧，都會(huì)更加得心應(yīng)手脊另、事半功倍的！

作者：一斤代碼
鏈接：http://www.reibang.com/p/32997f74c828
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有约巷。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)偎痛，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末独郎，一起剝皮案震驚了整個(gè)濱河市踩麦，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌氓癌，老刑警劉巖谓谦，帶你破解...
    沈念sama閱讀 221,695評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異贪婉，居然都是意外死亡反粥，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門疲迂，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)才顿，“玉大人，你說(shuō)我怎么就攤上這事鬼譬∧缺欤” “怎么了？”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,130評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵优质，是天一觀的道長(zhǎng)竣贪。 經(jīng)常有香客問(wèn)我军洼，道長(zhǎng)，這世上最難降的妖魔是什么演怎？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,648評(píng)論 1贊 297
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任匕争，我火速辦了婚禮，結(jié)果婚禮上爷耀，老公的妹妹穿的比我還像新娘甘桑。我一直安慰自己，他們只是感情好歹叮，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布跑杭。 她就那樣靜靜地躺著，像睡著了一般咆耿。 火紅的嫁衣襯著肌膚如雪德谅。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書(shū)人閱讀 52,268評(píng)論 1贊 309
  • 城市分裂傳說(shuō)
    那天萨螺，我揣著相機(jī)與錄音窄做，去河邊找鬼。 笑死慰技，一個(gè)胖子當(dāng)著我的面吹牛椭盏，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吻商，決...
    沈念sama閱讀 40,835評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼掏颊，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了手报？” 一聲冷哼從身側(cè)響起蚯舱，我...
    開(kāi)封第一講書(shū)人閱讀 39,740評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎掩蛤，沒(méi)想到半個(gè)月后枉昏，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1贊 318
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡揍鸟，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年兄裂，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阳藻。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡晰奖，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出腥泥，到底是詐尸還是另有隱情匾南，我是刑警寧澤，帶...
    沈念sama閱讀 36,185評(píng)論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布蛔外，位于F島的核電站蛆楞，受9級(jí)特大地震影響溯乒，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜豹爹，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3贊 333
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一裆悄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧臂聋，春花似錦光稼、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,357評(píng)論 0贊 24
  • 一樁弒父案艾君，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至瞎访，卻和暖如春腻贰，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背扒秸。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,466評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留冀瓦，地道東北人伴奥。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像翼闽，于是被迫代替她去往敵國(guó)和親拾徙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2贊 359

推薦閱讀更多精彩內(nèi)容

  • 前言 這是我第一次開(kāi)發(fā)小程序感局，開(kāi)發(fā)的產(chǎn)品是音頻類的尼啡，在大佬的建議下采用了mpvue,一周時(shí)間把功能都做出來(lái)，由于不...
    fengxianqi閱讀 2,246評(píng)論 0贊 5
  • 本章涉及知識(shí)點(diǎn)1询微、前言2崖瞭、mpVue框架簡(jiǎn)介3、項(xiàng)目配置和結(jié)構(gòu)4撑毛、主程序入口配置5书聚、首頁(yè)頁(yè)面6、城市選擇頁(yè)面7藻雌、搜...
    PrivateEye_zzy閱讀 30,877評(píng)論 30贊 112
  • 原有系統(tǒng)的問(wèn)題 一個(gè)NSInteger的普通變量,它所占用的內(nèi)存與CPU的位數(shù)有關(guān),在32為CPU下占4個(gè)字節(jié),在...
    指尖猿閱讀 380評(píng)論 0贊 0
  • 祝福他人 就是 祝福自己
    平常心七七閱讀 110評(píng)論 0贊 5
  • 回學(xué)校前一天去了WF雌续，開(kāi)始是叔叔想讓去然后一起回學(xué)校，做了一番思想斗爭(zhēng)胯杭，怕去你在的城市驯杜，離你那么近，會(huì)忍不住去...
    七l柒閱讀 236評(píng)論 0贊 2