Vue經常使用組件的開發

查看 原文站點，更多擴展內容及更佳閱讀體驗！

實戰：經常使用組件的開發

數字輸入框只能輸入數字，並且有兩個快捷按鈕，能夠直接減1或加1。除此以外，還能夠設置初始值、最大/小值，在數值改變時，觸發一個自定義事件來通知父組件。

目錄文件：

• index.html 入口頁
• input-number.js 數字輸入框組件
• index.js 根實例

先在template裏定義組件的根節點，由於是獨立組件，因此應該對每一個prop進行校驗。

接下來，先在父組件引入input-number組件。

value是一個關鍵的綁定值，使用v-model。大多數的表單組件都應該有一個v-model，好比輸入框、單選框、多選框、下拉選擇器等。

Vue組件時單向數據流，沒法從組件內部直接修改prop value的值。

解決辦法是給組件聲明一個data，默認引用value的值，而後在組件內部維護這個data。

Vue.component('input-number', {
    data() {
        return {
            currentValue: this.value
        }
    }
});

這樣只解決了初始化時引用父組件value的問題，可是若是從父組件修改了value，input-number組件的currentValue也要一塊兒更新。

監聽（watch），watch選項用來監聽某個prop或data的改變，當它們發生變化時，就會觸發watch配置的函數，從而完成業務邏輯。

從父組件傳遞過來的value可能不符合當前條件（大於max，或小於min），因此在methods中寫了一個方法updateValue，用來過濾出一個正確的currentValue。

watch監聽的數據的回調函數有2個參數可用，第一個是新的值，第二個是舊的值。

在回調函數裏，this指向當前組件實例。因此能夠直接調用this.updateValue()，由於Vue代理了props、data、computed及methods。

監聽currentValue的回調裏，this.$emit('input',val)在使用v-model時改變value，this.$emit('on-change',val)是觸發自定義事件on-change，用於告知父組件數字輸入框的值有所變化。

在生命週期mounted鉤子裏也調用了updateValue()方法，是由於第一次初始化時，也對value進行了過濾。

input綁定了數據currentValue和原生的change事件，在句柄handleChange函數中，判斷了當前輸入的是否時數字。

<p data-height="365" data-theme-id="0" data-slug-hash="oyzBWM" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue組件實例" class="codepen">See the Pen Vue組件實例 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

標籤頁組件

每一個標籤頁的主體內容由使用組件的父級控制，這部分是一個slot，並且slot的數量決定標籤切換按鈕的數量。

文件目錄：

• index.html 入口頁
• style.css 樣式表
• tabs.js 標籤頁外層的組件tabs
• pane.js 標籤頁嵌套的組件pane

pane須要控制標籤頁內容的顯示與隱藏，設置一個data:show，而且用v-show指令來控制元素。

getTabs是一個公用的方法，使用this.$children來取到全部的pane組件實例。

在methods中使用了有function回調的方法時，在回調內的this再也不執行當前的Vue實例，也就是tabs組件自己，須要在外層設置一個_this=this的局部變量來間接使用this。

遍歷每個pane組件後，把它的label和name提取出來，構成一個Object並添加到數據navList數組裏。

在使用v-for指令循環顯示tab標題時，使用v-bind:class指向了一個名爲tabCls的methods來動態設置class名稱。

點擊每一個tab標題時，會觸發handleChange方法來改變當前選中tab的索引，也就是pane組件的name。在watch選項中監聽了currentValue，當其發生變化時，觸發updateStatus方法來更新pane組件的顯示狀態。

使用組件嵌套的方式，將一系列 pane組件做爲 tabs組件的 slot； tabs組件和 pane組件通訊上，使用了 $parent和 $children的方法訪問父鏈和子鏈；定義了 prop:value和 data:currentValue，使用 $emit('input')來實現 v-model的用法。

<p data-height="365" data-theme-id="0" data-slug-hash="vrXWQw" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-tabs" class="codepen">See the Pen Vue-tabs by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>