概述

上一篇我們重點(diǎn)介紹了組件的創(chuàng)建、注冊(cè)和使用，熟練這幾個(gè)步驟將有助于深入組件的開發(fā)。另外，在子組件中定義props，可以讓父組件的數(shù)據(jù)傳遞下來(lái)，這就好比子組件告訴父組件：“嘿，老哥，我開通了一個(gè)驛站，你把東西放到驛站我就可以拿到了?！?/p>

今天我們將著重介紹slot和父子組件之間的訪問(wèn)和通信，slot是一個(gè)非常有用的東西，它相當(dāng)于一個(gè)內(nèi)容插槽，它是我們重用組件的基礎(chǔ)。Vue的事件系統(tǒng)獨(dú)立于原生的DOM事件，它用于組件之間的通信。

本文的主要內(nèi)容如下：

• 組件的編譯作用域
• 在組件template中使用<slot>標(biāo)簽作為內(nèi)容插槽
• 使用$children, $refs, $parent 實(shí)現(xiàn)父子組件之間的實(shí)例訪問(wèn)
• 在子組件中，使用$dispatch向父組件派發(fā)事件；在父組件中，使用$broadcast向子組件傳播事件
• 結(jié)合這些基礎(chǔ)知識(shí)，我們一步一步實(shí)現(xiàn)一個(gè)CURD的示例

Demo和源代碼已放到GitHub，如果您覺得本篇內(nèi)容不錯(cuò)，請(qǐng)點(diǎn)個(gè)贊，或在GitHub上加個(gè)星星！

注意：以下示例的組件模板都定義在<template>標(biāo)簽中，然而IE不支持<template>標(biāo)簽，這使得在IE中<template>標(biāo)簽中的內(nèi)容會(huì)顯示出來(lái)。解決辦法——隱藏<template>標(biāo)簽

template{
    display: none;
}

個(gè)瀏覽器對(duì)<template>標(biāo)簽的支持情況，請(qǐng)參見：http:///#feat=template

編譯作用域

盡管使用組件就像使用一般的HTML元素一樣，但它畢竟不是標(biāo)準(zhǔn)的HTML元素，為了讓瀏覽器能夠識(shí)別它，組件會(huì)被解析為標(biāo)準(zhǔn)的HTML片段，然后將組件的標(biāo)簽替換為該HTML片段。

<div id="app">
    <my-component>
    </my-component>
</div>

<template id="myComponent">
    <div>
        <h2>{{ msg }}</h2>
        <button v-on:click="showMsg">Show Message</button>
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'my-component': {
                template: '#myComponent',
                data: function() {
                    return {
                        msg: 'This is a component!'
                    }
                },
                methods: {
                    showMsg: function() {
                        alert(this.msg)
                    }
                }
            }
        }
    })

這段代碼定義了一個(gè)my-component組件，<my-component><my-component>不是標(biāo)準(zhǔn)的HTML元素，瀏覽器是不理解這個(gè)元素的。
那么Vue是如何讓瀏覽器理解<my-component><my-component>標(biāo)簽的呢？（下圖是我個(gè)人的理解）

在創(chuàng)建一個(gè)Vue實(shí)例時(shí)，除了將它掛載到某個(gè)HTML元素下，還要編譯組件，將組件轉(zhuǎn)換為HTML片段。
除此之外，Vue實(shí)例還會(huì)識(shí)別其所掛載的元素下的<my-component>標(biāo)簽，然后將<my-component>標(biāo)簽替換為HTML片段。

實(shí)際上瀏覽器仍然是不理解<my-component>標(biāo)簽的，我們可以通過(guò)查看源碼了解到這一點(diǎn)。

組件在使用前，經(jīng)過(guò)編譯已經(jīng)被轉(zhuǎn)換為HTML片段了，組件是有一個(gè)作用域的，那么組件的作用域是什么呢？
你可以將它理解為組件模板包含的HTML片段，組件模板內(nèi)容之外就不是組件的作用域了。
例如，my-component組件的作用域只是下面這個(gè)小片段。

組件的模板是在其作用域內(nèi)編譯的，那么組件選項(xiàng)對(duì)象中的數(shù)據(jù)也應(yīng)該是在組件模板中使用的。
考慮下面的代碼，在Vue實(shí)例和組件的data選項(xiàng)中分別追加一個(gè)display屬性：

new Vue({
    el: '#app',
    data: {
        display: true
    },
    components: {
        'my-component': {
            template: '#myComponent',
            data: function() {
                return {
                    msg: 'This is a component!',
                    display: false
                }
            },
            methods: {
                showMsg: function() {
                    alert(this.msg)
                }
            }
        }
    }
})

<div id="app">
    <my-component v-show="display">
    </my-component>
</div>

答案是Vue實(shí)例。

至此，我們應(yīng)該認(rèn)識(shí)到組件的作用域是獨(dú)立的：

通俗地講，在子組件中定義的數(shù)據(jù)，只能用在子組件的模板。在父組件中定義的數(shù)據(jù)，只能用在父組件的模板。如果父組件的數(shù)據(jù)要在子組件中使用，則需要子組件定義props。

使用Slot

為了讓組件可以組合，我們需要一種方式來(lái)混合父組件的內(nèi)容與子組件自己的模板。這個(gè)處理稱為內(nèi)容分發(fā)，Vue.js 實(shí)現(xiàn)了一個(gè)內(nèi)容分發(fā) API，使用特殊的 <slot> 元素作為原始內(nèi)容的插槽。

如果不理解這段話，可以先跳過(guò)，你只要知道<slot>元素是一個(gè)內(nèi)容插槽。

單個(gè)Slot

下面的代碼在定義my-component組件的模板時(shí)，指定了一個(gè)<slot></slot>元素。

<div id="app">
    <my-component>
        <h1>Hello Vue.js!</h1>
    </my-component>

    <my-component>
    </my-component>
</div>
<template id="myComponent">
    <div class="content">
        <h2>This is a component!</h2>
        <slot>如果沒(méi)有分發(fā)內(nèi)容，則顯示slot中的內(nèi)容</slot>
        <p>Say something...</p>
    </div>
</template>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-component', {
        template: '#myComponent'
    })

    new Vue({
        el: '#app'
    })
</script>

這段代碼運(yùn)行結(jié)果如下：

第一個(gè)<my-component>標(biāo)簽有一段分發(fā)內(nèi)容<h1>Hello Vue.js!</h1>，渲染組件時(shí)顯示了這段內(nèi)容。

第二個(gè)<my-component>標(biāo)簽則沒(méi)有，渲染組件時(shí)則顯示了slot標(biāo)簽中的內(nèi)容。

View Demo

指定名稱的slot

上面這個(gè)示例是一個(gè)匿名slot，它只能表示一個(gè)插槽。如果需要多個(gè)內(nèi)容插槽，則可以為slot元素指定name屬性。

多個(gè)slot一起使用時(shí)，會(huì)非常有用。例如，對(duì)話框是HTML常用的一種交互方式。
在不同的運(yùn)用場(chǎng)景下，對(duì)話框的頭部、主體內(nèi)容、底部可能是不一樣的。

這時(shí)，使用不同名稱的slot就能輕易解決這個(gè)問(wèn)題了。

<template id="dialog-template">
    <div class="dialogs">
        <div class="dialog" v-bind:class="{ 'dialog-active': show }">
            <div class="dialog-content">
                <div class="close rotate">
                    <span class="iconfont icon-close" @click="close"></span>
                </div>
                <slot name="header"></slot>
                <slot name="body"></slot>
                <slot name="footer"></slot>
            </div>
        </div>
        <div class="dialog-overlay"></div>
    </div>
</template>

<script src="js/vue.js"></script>
<script>
    Vue.component('modal-dialog', {
        template: '#dialog-template',
        props: ['show'],
        methods: {
            close: function() {
                this.show = false
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {
            openDialog: function() {
                this.show = true
            },
            closeDialog: function() {
                this.show = false
            }
        }
    })
</script>

在定義modal-dialog組件的template時(shí)，我們使用了3個(gè)slot，它們的name特性分別是header、body和footer。

在<modal-dialog>標(biāo)簽下，分別為三個(gè)元素指定slot特性：

<div id="app">
    <modal-dialog v-bind:show.sync="show">

        <header class="dialog-header" slot="header">
            <h1 class="dialog-title">提示信息</h1>
        </header>

        <div class="dialog-body" slot="body">
            <p>你想在對(duì)話框中放什么內(nèi)容都可以！</p>
            <p>你可以放一段文字，也可以放一些表單，或者是一些圖片。</p>
        </div>

        <footer class="dialog-footer" slot="footer">
            <button class="btn" @click="closeDialog">關(guān)閉</button>
        </footer>
    </modal-dialog>

    <button class="btn btn-open" @click="openDialog">打開對(duì)話框</button>
</div>

對(duì)話框的標(biāo)題內(nèi)容、主體內(nèi)容、底部?jī)?nèi)容，完全由我們自定義，而且這些內(nèi)容就是一些簡(jiǎn)單的HTML元素！

View Demo

如果需要定制對(duì)話框的樣式，我們只需要在<modal-dialog>上追加一個(gè)v-bind指令，讓它綁定一個(gè)class。

<modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass">

然后修改一下Vue實(shí)例，在data選項(xiàng)中追加一個(gè)dialogClass屬性，然后修改openDialog()方法：

new Vue({
    el: '#app',
    data: {
        show: false,
        dialogClass: 'dialog-info'
    },
    methods: {
        openDialog: function(dialogClass) {
            this.show = true
            this.dialogClass = dialogClass
        },
        closeDialog: function() {
            this.show = false
        }
    }
})

View Demo

雖然我們?cè)趍odal-dialog組件中定義了3個(gè)slot，但是在頁(yè)面中使用它時(shí)，并不用每次都指定這3個(gè)slot。
比如，有時(shí)候我們可能只需要header和body：

<modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass">
    <header class="dialog-header" slot="header">
        <h1 class="dialog-title">提示信息</h1>
    </header>

    <div class="dialog-body" slot="body">
        <p>你想在對(duì)話框中放什么內(nèi)容都可以！</p>
        <p>你可以放一段文字，也可以放一些表單，或者是一些圖片。</p>
    </div>
</modal-dialog>

現(xiàn)在看到的對(duì)話框是沒(méi)有底部的，只有標(biāo)題和主體內(nèi)容。

View Demo

多個(gè)slot同時(shí)使用的場(chǎng)景還有很多，例如：用戶的注冊(cè)、登錄、找回密碼等這些表單集合，也可以用一個(gè)組件來(lái)完成。

父子組件之間的訪問(wèn)

有時(shí)候我們需要父組件訪問(wèn)子組件，子組件訪問(wèn)父組件，或者是子組件訪問(wèn)根組件。
針對(duì)這幾種情況，Vue.js都提供了相應(yīng)的API：

• 父組件訪問(wèn)子組件：使用$children或$refs
• 子組件訪問(wèn)父組件：使用$parent
• 子組件訪問(wèn)根組件：使用$root

$children示例

下面這段代碼定義了3個(gè)組件：父組件parent-component，兩個(gè)子組件child-component1和child-component2。

在父組件中，通過(guò)this.$children可以訪問(wèn)子組件。
this.$children是一個(gè)數(shù)組，它包含所有子組件的實(shí)例。

<div id="app">
    <parent-component></parent-component>
</div>

<template id="parent-component">
    <child-component1></child-component1>
    <child-component2></child-component2>
    <button v-on:click="showChildComponentData">顯示子組件的數(shù)據(jù)</button>
</template>

<template id="child-component1">
    <h2>This is child component 1</h2>
</template>

<template id="child-component2">
    <h2>This is child component 2</h2>
</template>

<script src="js/vue.js"></script>
<script>
    Vue.component('parent-component', {
        template: '#parent-component',
        components: {
            'child-component1': {
                template: '#child-component1',
                data: function() {
                    return {
                        msg: 'child component 111111'
                    }
                }
            },
            'child-component2': {
                template: '#child-component2',
                data: function() {
                    return {
                        msg: 'child component 222222'
                    }
                }
            }
        },
        methods: {
            showChildComponentData: function() {
                for (var i = 0; i < this.$children.length; i++) {
                    alert(this.$children[i].msg)
                }
            }
        }
    })

    new Vue({
        el: '#app'
    })
</script>

View Demo

$refs示例

組件個(gè)數(shù)較多時(shí)，我們難以記住各個(gè)組件的順序和位置，通過(guò)序號(hào)訪問(wèn)子組件不是很方便。
在子組件上使用v-ref指令，可以給子組件指定一個(gè)索引ID：

<template id="parent-component">
    <child-component1 v-ref:cc1></child-component1>
    <child-component2 v-ref:cc2></child-component2>
    <button v-on:click="showChildComponentData">顯示子組件的數(shù)據(jù)</button>
</template>

在父組件中，則通過(guò)$refs.索引ID訪問(wèn)子組件的實(shí)例：

showChildComponentData: function() {
    alert(this.$refs.cc1.msg);
    alert(this.$refs.cc2.msg);
}

$parent示例

下面這段代碼定義了兩個(gè)組件：child-component和它的父組件parent-component。
在子組件中，通過(guò)this.$parent可以訪問(wèn)到父組件的實(shí)例。

<div id="app">
    <parent-component></parent-component>
</div>

<template id="parent-component">
    <child-component></child-component>
</template>

<template id="child-component">
    <h2>This is a child component</h2>
    <button v-on:click="showParentComponentData">顯示父組件的數(shù)據(jù)</button>
</template>

<script src="js/vue.js"></script>
<script>
    Vue.component('parent-component', {
        template: '#parent-component',
        components: {
            'child-component': {
                template: '#child-component',
                methods: {
                    showParentComponentData: function() {
                        alert(this.$parent.msg)
                    }
                }
            }
        },
        data: function() {
            return {
                msg: 'parent component message'
            }
        }
    })
    new Vue({
        el: '#app'
    })
</script>

View Demo

注意：盡管可以訪問(wèn)父鏈上任意的實(shí)例，不過(guò)子組件應(yīng)當(dāng)避免直接依賴父組件的數(shù)據(jù)，盡量顯式地使用 props 傳遞數(shù)據(jù)。另外，在子組件中修改父組件的狀態(tài)是非常糟糕的做法，因?yàn)椋?
1.這讓父組件與子組件緊密地耦合；
2. 只看父組件，很難理解父組件的狀態(tài)。因?yàn)樗赡鼙蝗我庾咏M件修改！理想情況下，只有組件自己能修改它的狀態(tài)。

自定義事件

有時(shí)候我們希望觸發(fā)父組件的某個(gè)事件時(shí)，可以通知到子組件；觸發(fā)子組件的某個(gè)事件時(shí)，可以通知到父組件。
Vue 實(shí)例實(shí)現(xiàn)了一個(gè)自定義事件接口，用于在組件樹中通信。這個(gè)事件系統(tǒng)獨(dú)立于原生 DOM 事件，用法也不同。

每個(gè) Vue 實(shí)例都是一個(gè)事件觸發(fā)器：

• 使用 $on() 監(jiān)聽事件；
• 使用 $emit() 在它上面觸發(fā)事件；
• 使用 $dispatch() 派發(fā)事件，事件沿著父鏈冒泡；
• 使用 $broadcast() 廣播事件，事件向下傳導(dǎo)給所有的后代。

派發(fā)事件

下面這段代碼是一個(gè)簡(jiǎn)單的事件派發(fā)處理

<div id="app">
    <p>Messages: {{ messages | json }}</p>
    <child-component></child-component>
</div>

<template id="child-component">
    <input v-model="msg" />
    <button v-on:click="notify">Dispatch Event</button>
</template>

<script src="js/vue.js"></script>
<script>
    // 注冊(cè)子組件
    Vue.component('child-component', {
        template: '#child-component',
        data: function() {
            return {
                msg: ''
            }
        },
        methods: {
            notify: function() {
                if (this.msg.trim()) {
                    this.$dispatch('child-msg', this.msg)
                    this.msg = ''
                }
            }
        }
    })

    // 初始化父組件
    new Vue({
        el: '#app',
        data: {
            messages: []
        },
        events: {
            'child-msg': function(msg) {
                this.messages.push(msg)
            }
        }
    })
</script>

View Demo

我們將這個(gè)示例分為幾個(gè)步驟解讀：

1. 子組件的button元素綁定了click事件，該事件指向notify方法
2. 子組件的notify方法在處理時(shí)，調(diào)用了$dispatch，將事件派發(fā)到父組件的child-msg事件，并給該該事件提供了一個(gè)msg參數(shù)
3. 父組件的events選項(xiàng)中定義了child-msg事件，父組件接收到子組件的派發(fā)后，調(diào)用child-msg事件。

運(yùn)行結(jié)果如下：

廣播事件

下面這段代碼是一個(gè)簡(jiǎn)單的事件廣播處理

<div id="app">
    <input v-model="msg" />
    <button v-on:click="notify">Broadcast Event</button>
    <child-component></child-component>
</div>

<template id="child-component">
    <ul>
        <li v-for="item in messages">
            父組件錄入了信息：{{ item }}
        </li>
    </ul>
</template>

<script src="js/vue.js"></script>
<script>
    // 注冊(cè)子組件
    Vue.component('child-component', {
        template: '#child-component',
        data: function() {
            return {
                messages: []
            }
        },
        events: {
            'parent-msg': function(msg) {
                this.messages.push(msg)
            }
        }
    })
    // 初始化父組件
    new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        methods: {
            notify: function() {
                if (this.msg.trim()) {
                    this.$broadcast('parent-msg', this.msg)
                }
            }
        }
    })
</script>

View Demo

我們將這個(gè)示例分為幾個(gè)步驟解讀：

1. 父組件的button元素綁定了click事件，該事件指向notify方法
2. 父組件的notify方法在處理時(shí)，調(diào)用了$broadcast，將事件派發(fā)到子組件的parent-msg事件，并給該該事件提供了一個(gè)msg參數(shù)
3. 子組件的events選項(xiàng)中定義了parent-msg事件，子組件接收到父組件的廣播后，調(diào)用parent-msg事件。

運(yùn)行結(jié)果如下：

CURD示例

Vue.js組件的API來(lái)源于三部分——prop，slot和事件。

• prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件；
• 事件 允許組件觸發(fā)外部環(huán)境的 action；
• slot 允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)內(nèi)。

至此，這三部分我都已經(jīng)介紹完了，接下來(lái)我就用這些知識(shí)來(lái)教大家一步一步完成一個(gè)CURD示例。

第1步——?jiǎng)?chuàng)建表格組件，添加查詢和刪除功能

創(chuàng)建表格組件，添加過(guò)濾，數(shù)據(jù)刪除功能

<div id="app">
    <div class="container">
        <div class="form-group">
            <label>Search</label>
            <input type="text" class="search-input" v-model="searchQuery" />
        </div>

    </div>
    <div class="container">
        <simple-grid :data-list="people" :columns="columns" :search-key="searchQuery">
        </simple-grid>
    </div>
</div>

<template id="grid-template">
    <table>
        <thead>
            <tr>
                <th v-for="col in columns">
                    {{ col.name | capitalize}}
                </th>
                <th>
                    Delete
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(index,entry) in dataList | filterBy searchKey">
                <td v-for="col in columns">
                    {{entry[col.name]}}
                </td>
                <td class="text-center">
                    <button @click="deleteItem(index)">delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script src="../js/vue.js"></script>
<script>
    Vue.component('simple-grid', {
        template: '#grid-template',
        props: ['dataList', 'columns', 'searchKey'],
        methods: {
            deleteItem: function(index) {
                this.dataList.splice(index, 1);
            },
        }
    })

    var demo = new Vue({
        el: '#app',
        data: {
            searchQuery: '',
            columns: [{
                name: 'name'
            }, {
                name: 'age'
            }, {
                name: 'sex'
            }],
            people: [{
                name: 'Jack',
                age: 30,
                sex: 'Male'
            }, {
                name: 'Bill',
                age: 26,
                sex: 'Male'
            }, {
                name: 'Tracy',
                age: 22,
                sex: 'Female'
            }, {
                name: 'Chris',
                age: 36,
                sex: 'Male'
            }]
        }
    })
</script>

View Demo

使用知識(shí)點(diǎn)

1. 使用Vue.component語(yǔ)法糖

Vue.component是創(chuàng)建并注冊(cè)組件的語(yǔ)法糖，使用Vue.component注冊(cè)的組件是全局的。

2. 使用prop將父組件數(shù)據(jù)傳遞給子組件

#app元素是父組件，simple-grid是子組件。

在simple-grid組件中定義選項(xiàng)props: ['dataList', 'columns', 'searchKey']
在#app下使用<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"> 將數(shù)據(jù)傳遞給simple-grid組件

3. 使用過(guò)濾器

{{ col.name | capitalize}}使用了capitalize過(guò)濾器，將字符串的首字母轉(zhuǎn)換為大寫后輸出。
filterBy filterKey使用了filterBy過(guò)濾器，根據(jù)指定條件過(guò)濾數(shù)組元素，filterBy返回過(guò)濾后的數(shù)組。

4. 使用數(shù)組索引別名

數(shù)組默認(rèn)的索引名稱為$index，v-for="(index,entry) in dataList使用了數(shù)組索引別名。
括號(hào)中的第一個(gè)參數(shù)index是$index的別名，第二個(gè)參數(shù)是遍歷的數(shù)組元素。

5. 使用了v-bind和v-on指令的縮寫

<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"> 使用了v-bind指令的縮寫。
:data-list是v-bind:data-list的縮寫，:columns是v-bind:columns的縮寫，:search-key是v-bind:search-key的縮寫。

<button @click="deleteItem(index)">delete</button> 使用了v-on指令的縮寫，@click是v-on:click的縮寫。

第2步——?jiǎng)?chuàng)建對(duì)話框組件

表格數(shù)據(jù)的添加和修改，我們使用模態(tài)對(duì)話框來(lái)實(shí)現(xiàn)。
模態(tài)對(duì)話框有兩種模式，新建模式和修改模式，分別用于新建一條數(shù)據(jù)和修改指定的數(shù)據(jù)。
由于對(duì)話框的內(nèi)容來(lái)源于具體的數(shù)據(jù)，所以我們可以考慮將對(duì)話框作為simple-grid組件的一個(gè)子組件。

modal-dialog組件的模板內(nèi)容：

<template id="dialog-template">
    <div class="dialogs">
        <div class="dialog" v-bind:class="{ 'dialog-active': show }">
            <div class="dialog-content">
                <header class="dialog-header">
                    <h1 class="dialog-title">{{ title }}</h1>
                </header>
                <footer class="dialog-footer">
                    <div class="form-group">
                        <label></label>
                        <button v-on:click="save">Save</button>
                        <button v-on:click="close">Close</button>
                    </div>
                </footer>
            </div>
        </div>
        <div class="dialog-overlay"></div>
    </div>
</template>

modal-dialog組件在simple-grid組件中注冊(cè)：

Vue.component('simple-grid', {
    // ...已省略
    data: function() {
        return {
            mode: 0,
            item: {}
        }
    },
    components: {
        'modal-dialog': {
            template: '#dialog-template',
            data: function() {
                return {
                    // 對(duì)話框默認(rèn)是不顯示的
                    show: false
                }
            },
            /*
             * mode = 1是新增數(shù)據(jù)模式，mode = 2是修改數(shù)據(jù)模式
             * title表示對(duì)話框的標(biāo)題內(nèi)容
             * fields表示對(duì)話框要顯示的數(shù)據(jù)字段數(shù)組
             * item是由simple-dialog傳下來(lái)，用于綁定表單字段的
             */
            props: ['mode', 'title', 'fields', 'item'],
            methods: {
                close: function() {
                    this.show = false
                },
                save: function() {

                }
            }
        }
    }
    // ...已省略
})

由于modal-dialog組件是simple-grid的子組件，所以它應(yīng)該在simple-grid的template中使用：

<template id="grid-template">
    <!--...前面的內(nèi)容已省略	-->
    <modal-dialog :mode="mode" :title="title" :fields="columns" :item="item">
    </modal-dialog>
    <!--...后面的內(nèi)容已省略	-->
</template>

modal-dialog組件的props選項(xiàng)，追加了3個(gè)元素：

• title表示對(duì)話框的標(biāo)題內(nèi)容
• fields表示對(duì)話框要顯示的數(shù)據(jù)字段數(shù)組
• item用于綁定表單字段，它是一個(gè)對(duì)象

注意：由于modal-dialog是一個(gè)子組件，它僅用于simple-grid組件的新增或修改模式，所以modal-dialog的template沒(méi)有使用<slot>元素

使用知識(shí)點(diǎn)

1. 使用組件的局部注冊(cè)

modal-dialog組件沒(méi)有使用Vue.component進(jìn)行全局注冊(cè)，使用simple-grid組件components選項(xiàng)實(shí)現(xiàn)了局部注冊(cè)。

2. 使用組件的data選項(xiàng)

組件的data選項(xiàng)必須以函數(shù)的方式返回。

第3步——實(shí)現(xiàn)數(shù)據(jù)新建功能

View Demo

1. 修改Vue實(shí)例的data選項(xiàng)的columns：

var demo = new Vue({
    // ...已省略	
    columns: [{
            name: 'name',
            isKey: true
        }, {
            name: 'age'
        }, {
            name: 'sex',
            dataSource: ['Male', 'Female']
        }]
    // ...已省略
})

為'name'列追加一個(gè)isKey屬性，并設(shè)置為true，表示該列為主鍵列。
為'sex'列追加一個(gè)dataSoruce屬性，并設(shè)置為['Male', 'Female']，表示新增或修改數(shù)據(jù)時(shí)選擇性別的下拉框數(shù)據(jù)源。

2. 修改modal-dialog的template:

<template id="dialog-template">
    <div class="dialogs">
        <div class="dialog" v-bind:class="{ 'dialog-active': show }">
            <div class="dialog-content">
                <header class="dialog-header">
                        <h1 class="dialog-title">{{ title }}</h1>
                </header>

                <div v-for="field in fields" class="form-group" >
                        <label>{{ field.name }}</label>
                        <select v-if="field.dataSource" v-model="item[field.name]">
                            <option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
                        </select>
                        <input v-else type="text" v-model="item[field.name]">
                </div>

                <footer class="form-group">
                    <label></label>
                    <button v-on:click="save">Save</button>
                    <button v-on:click="close">Close</button>
                </footer>
            </div>
        </div>
        <div class="dialog-overlay"></div>
    </div>
</template>

在modal-dialog組件的模板中遍歷fields，然后顯示field的名稱。
在渲染表單時(shí)，根據(jù)是否有dataSource判定表單是下拉框還是文本框。
（由于示例較為簡(jiǎn)陋，所以只提供了input和select兩種表單類型）

注意modal-dialog組件的fields是由Vue實(shí)例傳遞給simple-grid，然后再由simple-grid傳遞過(guò)來(lái)的。

3. 修改simple-grid的template

<template id="grid-template">
    <!--...已省略	-->
    <div class="container">
        <button class="btn" @click="openNewItemDialog('Create new item')">Create</button>
    </div>

    <modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" v-on:create-item="createItem">
    </modal-dialog>
</template>

添加一個(gè)Create按鈕，綁定click事件到openNewItemDiaolog()方法，該方法用于打開modal-dialog組件，并將模式設(shè)置為新建模式。
在<modal-dialog>標(biāo)簽上給sample-grid綁定一個(gè)自定義事件create-item，后面在$dispatch派發(fā)事件時(shí)會(huì)用到。

4. 修改simple-grid的methods選項(xiàng)

Vue.component('simple-grid', {
    // ...已省略	
    methods: {

        openNewItemDialog: function(title) {
            // 對(duì)話框的標(biāo)題
            this.title = title
            // mode = 1表示新建模式
            this.mode = 1
            // 初始化this.item
            this.item = {}
            // 廣播事件，showDialog是modal-dialog組件的一個(gè)方法，傳入?yún)?shù)true表示顯示對(duì)話框
            this.$broadcast('showDialog', true)
        },
        createItem: function() {
            // 將item追加到dataList
            this.dataList.push(this.item)
            // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
            this.$broadcast('showDialog', false)
            // 新建完數(shù)據(jù)后，重置item對(duì)象
            this.item = {}
        },
        deleteItem: function(index) {
            this.dataList.splice(index, 1);
        },
    },
    // ...已省略	
})

追加了兩個(gè)方法：opeNewItemDialog和createItem方法。

opeNewItemDialog方法用于打開對(duì)話框，this.$broadcast('showDialog', true) 調(diào)用子組件modal-dialog的showDialog事件，傳入?yún)?shù)true表示顯示對(duì)話框。

createItem方法用于保存新建的數(shù)據(jù)，this.$broadcast('showDialog', false) 調(diào)用子組件modal-dialog的showDialog事件，傳入?yún)?shù)false表示隱藏對(duì)話框。

5. 修改modal-grid的methods和events選項(xiàng)

Vue.component('simple-grid', {
    // ...已省略	
    components: {
        'modal-dialog': {
            // ...已省略	
            methods: {
                close: function() {
                    this.show = false
                },
                save: function() {
                    //新建模式
                    if (this.mode === 1){
                        // 使用$dispatch調(diào)用simple-grid的create-item方法
                        this.$dispatch('create-item')
                    }
                }
            },
            events: {
                // 顯示或隱藏對(duì)話框
                'showDialog': function(show) {
                    this.show = show
                }
            }
        }
    }
    // ...已省略	
})

修改methods選項(xiàng)的save方法，由于保存按鈕是在子組件modal-dialog中的，而createItem方法是在父組件simple-grid中的，所以這里使用this.$dispatch('create-item') 派發(fā)到父組件的自定義事件create-item。

追加events選項(xiàng)，添加showDialog事件，用于顯示或隱藏對(duì)話框。

請(qǐng)將4和5結(jié)合起來(lái)看，我們既用到了$broadcast廣播事件，又用到了$dispatch派發(fā)事件。
下面這幅圖有助于理解simple-grid和modal-dialog組件之間的通信：

create-item是一個(gè)自定義事件，由子組件modal-dialog調(diào)用this.$dispatch('create-item') 派發(fā)到自定義事件create-item，自定義事件create-item是綁定在父組件simple-grid上的，該事件會(huì)執(zhí)行createItem方法。

第4步——實(shí)現(xiàn)數(shù)據(jù)修改功能

View Demo

1. 修改sample-grid的template

<template id="grid-template">
    <!--...已省略-->
    <tbody>
        <tr v-for="(index,entry) in dataList | filterBy searchKey">
            <td v-for="col in columns">
                <span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(index, 'Edit item ' + entry[col.name])">{{entry[col.name]}}</a></span>
                <span v-else>{{entry[col.name]}}</span>
            </td>
        </tr>
    </tbody>
    <!--...已省略-->
    <modal-dialog 
        :mode="mode" 
        :title="title" 
        :item="item" 
        :fields="columns" 
        v-on:create-item="createItem" 
        v-on:update-item="updateItem">
    </modal-dialog>
</template>

遍歷列表數(shù)據(jù)時(shí)，使用v-if指令判斷當(dāng)前列是否為主鍵列，如果是主鍵列，則給主鍵列添加鏈接，然后給鏈接綁定click事件，click事件用于打開修改數(shù)據(jù)的對(duì)話框。
在<modal-dialog>標(biāo)簽上，給sample-grid綁定自定義事件update-item，update-item事件指向sample-grid的方法updateItem。

2. 修改modal-dialog的template

<div v-for="field in fields" class="form-group">
    <label>{{ field.name }}</label>
    <select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
            <option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
    </select>
    <input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
</div>

在修改模式下（mode = 2），如果當(dāng)前字段是主鍵字段，則禁止修改。

3. 修改sample-grid的methods選項(xiàng)

// 彈出修改數(shù)據(jù)的對(duì)話框時(shí)，使用對(duì)象的深拷貝
initItemForUpdate: function(p) {
    var c = c || {};
    for (var i in p) {
        // 屬性i是否為p對(duì)象的自有屬性
        if (p.hasOwnProperty(i)) {
            if (typeof p[i] === 'object') {
                c[i] = Array.isArray(p[i]) ? [] : {}
                deepCopy(p[i], c[i])
            } else {
                // 屬性是基礎(chǔ)類型時(shí)，直接拷貝
                c[i] = p[i]
            }
        }
    }
    return c;
},
findItemByKey: function(key){
    var keyColumn = this.keyColumn
    for(var i = 0; i < this.dataList.length; i++){
        if(this.dataList[i][keyColumn] === key){
            return this.dataList[i]
        }
    }
},
createItem: function() {
    // 將item追加到dataList
    this.dataList.push(this.item)
    // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
    this.$broadcast('showDialog', false)
    // 新建完數(shù)據(jù)后，重置item對(duì)象
    this.item = {}
},
updateItem: function() {
    // 獲取主鍵列
    var keyColumn = this.keyColumn

    for (var i = 0; i < this.dataList.length; i++) {
        // 根據(jù)主鍵查找要修改的數(shù)據(jù)，然后將this.item數(shù)據(jù)更新到this.dataList[i]
        if (this.dataList[i][keyColumn] === this.item[keyColumn]) {
            for (var j in this.item) {
                this.dataList[i][j] = this.item[j]
            }
            break;
        }
    }
    // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
    this.$broadcast('showDialog', false)
    // 修改完數(shù)據(jù)后，重置item對(duì)象
    this.item = {}
}

追加的內(nèi)容：調(diào)用內(nèi)置的ready()函數(shù)，openEditDialog、updateItem、findItemByKey和initItemForUpdate方法。

ready()函數(shù)會(huì)在編譯結(jié)束和 $el 第一次插入文檔之后調(diào)用，你可以將其理解為jQuery中的document.ready()。
在ready()函數(shù)中，初始化keyColumn，keyColumn表示主鍵列，調(diào)用updateItem方法時(shí)，會(huì)根據(jù)主鍵數(shù)據(jù)找到dataList中匹配的元素。

opeEditItemDialog方法用于打開對(duì)話框，this.$broadcast('showDialog', true) 調(diào)用子組件modal-dialog的showDialog事件，傳入?yún)?shù)true表示顯示對(duì)話框。

ready()函數(shù)沒(méi)有特別的業(yè)務(wù)邏輯，主要是獲取主鍵列，調(diào)用updateItem方法時(shí)，會(huì)根據(jù)主鍵數(shù)據(jù)找到dataList中匹配的元素。

updateItem方法用于保存修改的數(shù)據(jù)，this.$broadcast('showDialog', false) 調(diào)用子組件modal-dialog的showDialog事件，傳入?yún)?shù)false表示隱藏對(duì)話框。

initItemForUpdate方法用于將選中的數(shù)據(jù)this.dataList[index]深拷貝到this.item。為什么要使用深拷貝呢？因?yàn)?code>this.dataList[index]是一個(gè)引用對(duì)象，它有一些屬性也是引用類型的，如果使用淺拷貝可能得到一些超出預(yù)期的效果。

4.修改modal-dialog的methods選項(xiàng)

save: function() {
    //新建模式
    if (this.mode === 1) {
        // 使用$dispatch調(diào)用simple-grid的create-item事件
        this.$dispatch('create-item')
    }else if(this.mode === 2){
        // 使用$dispatch調(diào)用simple-grid的update-item事件
        this.$dispatch('update-item')
    }
}

修改methods選項(xiàng)中的save方法，this.mode === 2時(shí)，將事件派發(fā)到父組件的update-item事件。

第5步——修改數(shù)據(jù)新建功能

View Demo

修改sample-grid的methods選項(xiàng)，追加itemExists方法，然后修改createItem方法。

itemExists: function(keyColumn) {
    for (var i = 0; i < this.dataList.length; i++) {
        if (this.item[keyColumn] === this.dataList[i][keyColumn])
            return true;
    }
    return false;
},
createItem: function() {
    var keyColumn = this.getKeyColumn()
    if (!this.itemExists(keyColumn)) {
        // 將item追加到dataList
        this.dataList.push(this.item)
        // 廣播事件，傳入?yún)?shù)false表示隱藏對(duì)話框
        this.$broadcast('showDialog', false)
        // 新建完數(shù)據(jù)后，重置item對(duì)象
        this.item = {}
    } else {
        alert(keyColumn + ' "' + this.item[keyColumn] + '" is already exists')
    }

}

由于主鍵列數(shù)據(jù)是不能重復(fù)的，所以在新增數(shù)據(jù)時(shí)需要判斷主鍵列數(shù)據(jù)是否已經(jīng)存在。

總結(jié)

說(shuō)到底，組件的API主要來(lái)源于以下三部分：

• prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件；
• 事件 允許組件觸發(fā)外部環(huán)境的 action；
• slot 允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)內(nèi)。

這三大知識(shí)點(diǎn)在上下兩篇文章中都體現(xiàn)出來(lái)了，限于篇幅和個(gè)人知識(shí)的匱乏，我并不能將組件的所有特性都描述出來(lái)，這還需要靠各位花一些時(shí)間去多多了解官網(wǎng)的API，并付諸實(shí)踐。

如果要構(gòu)建一些大型的應(yīng)用，基于組件的開發(fā)模式是一個(gè)不錯(cuò)的選擇，我們將整個(gè)系統(tǒng)拆分成一個(gè)一個(gè)小組件，就像樂(lè)高一樣，然后將這些組件拼接起來(lái)。