分分鐘玩轉(zhuǎn)Vue.js組件（二）

更新時(shí)間：2017年03月01日 15:19:26 作者：keepfool

這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,完善了vue.js組件的學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

概述

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

今天我們將著重介紹slot和父子組件之間的訪問和通信，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í)例訪問
在子組件中，使用$dispatch向父組件派發(fā)事件；在父組件中，使用$broadcast向子組件傳播事件
結(jié)合這些基礎(chǔ)知識(shí)，我們一步一步實(shí)現(xiàn)一個(gè)CURD的示例

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

對(duì)話框組件示例1 對(duì)話框組件示例2 對(duì)話框組件示例3 派發(fā)事件示例廣播事件示例 CURD示例 GitHub Source

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

template{
 display: none;
}

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

編譯作用域

盡管使用組件就像使用一般的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)簽的，我們可以通過查看源碼了解到這一點(diǎn)。

組件在使用前，經(jīng)過編譯已經(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)
 }
 }
 }
 }
})

然后在my-component標(biāo)簽上使用指令v-show="display"，這個(gè)display數(shù)據(jù)是來源于Vue實(shí)例，還是my-component組件呢？

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

答案是Vue實(shí)例。

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

父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；

子組件模板的內(nèi)容在子組件作用域內(nèi)編譯

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

使用Slot

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

如果不理解這段話，可以先跳過，你只要知道<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>如果沒有分發(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)簽則沒有，渲染組件時(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)用場景下，對(duì)話框的頭部、主體內(nèi)容、底部可能是不一樣的。

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

<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)容、底部內(nèi)容，完全由我們自定義，而且這些內(nèi)容就是一些簡單的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，但是在頁面中使用它時(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ì)話框是沒有底部的，只有標(biāo)題和主體內(nèi)容。

View Demo

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

父子組件之間的訪問

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

父組件訪問子組件：使用$children或$refs
子組件訪問父組件：使用$parent
子組件訪問根組件：使用$root

$children示例

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

在父組件中，通過this.$children可以訪問子組件。
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è)組件的順序和位置，通過序號(hào)訪問子組件不是很方便。
在子組件上使用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>

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

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

$parent示例

下面這段代碼定義了兩個(gè)組件：child-component和它的父組件parent-component。
在子組件中，通過this.$parent可以訪問到父組件的實(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

注意：盡管可以訪問父鏈上任意的實(shí)例，不過子組件應(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è)簡單的事件派發(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è)簡單的事件廣播處理

<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來源于三部分——prop，slot和事件。

prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件；

事件允許組件觸發(fā)外部環(huán)境的 action；

slot 允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)內(nèi)。

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

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

創(chuàng)建表格組件，添加過濾，數(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語法糖

Vue.component是創(chuàng)建并注冊(cè)組件的語法糖，使用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. 使用過濾器

{{ col.name | capitalize}}使用了capitalize過濾器，將字符串的首字母轉(zhuǎn)換為大寫后輸出。
filterBy filterKey使用了filterBy過濾器，根據(jù)指定條件過濾數(shù)組元素，filterBy返回過濾后的數(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步——創(chuàng)建對(duì)話框組件
表格數(shù)據(jù)的添加和修改，我們使用模態(tài)對(duì)話框來實(shí)現(xiàn)。
模態(tài)對(duì)話框有兩種模式，新建模式和修改模式，分別用于新建一條數(shù)據(jù)和修改指定的數(shù)據(jù)。
由于對(duì)話框的內(nè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: {}
 titie: ''
 }
 },
 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傳下來，用于綁定表單字段的
 */
 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沒有使用<slot>元素

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

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

modal-dialog組件沒有使用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判定表單是下拉框還是文本框。
（由于示例較為簡陋，所以只提供了input和select兩種表單類型）

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

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é)合起來看，我們既用到了$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ù)沒有特別的業(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)閠his.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é)

說到底，組件的API主要來源于以下三部分：

prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件；

事件允許組件觸發(fā)外部環(huán)境的 action；

slot 允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)內(nèi)。

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

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

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: