Vue.js——60分鐘組件快速入門（下篇）

時間  2019-11-08
標籤 vue.js vue 60分 組件 快速 入門 下篇 欄目 JavaScript 简体版
原文   原文鏈接

概述

上一篇咱們重點介紹了組件的建立、註冊和使用，熟練這幾個步驟將有助於深刻組件的開發。另外，在子組件中定義props，可讓父組件的數據傳遞下來，這就比如子組件告訴父組件：「嘿，老哥，我開通了一個驛站，你把東西放到驛站我就能夠拿到了。」javascript

今天咱們將着重介紹slot和父子組件之間的訪問和通訊，slot是一個很是有用的東西，它至關於一個內容插槽，它是咱們重用組件的基礎。Vue的事件系統獨立於原生的DOM事件，它用於組件之間的通訊。css

本文的主要內容以下：html

  • 組件的編譯做用域
  • 在組件template中使用<slot>標籤做爲內容插槽
  • 使用$children, $refs, $parent 實現父子組件之間的實例訪問
  • 在子組件中，使用$dispatch向父組件派發事件；在父組件中，使用$broadcast向子組件傳播事件
  • 結合這些基礎知識，咱們一步一步實現一個CURD的示例

Demo和源代碼已放到GitHub，若是您以爲本篇內容不錯，請點個贊，或在GitHub上加個星星！vue

對話框組件示例1 對話框組件示例2 對話框組件示例3 派發事件示例 廣播事件示例 CURD示例 GitHub Source

注意：如下示例的組件模板都定義在<template>標籤中，然而IE不支持<template>標籤，這使得在IE中<template>標籤中的內容會顯示出來。解決辦法——隱藏<template>標籤java

template{
	display: none;
}

個瀏覽器對<template>標籤的支持狀況，請參見：http://caniuse.com/#feat=templategit

編譯做用域

儘管使用組件就像使用通常的HTML元素同樣，但它畢竟不是標準的HTML元素，爲了讓瀏覽器可以識別它，組件會被解析爲標準的HTML片斷，而後將組件的標籤替換爲該HTML片斷。github

<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)
					}
				}
			}
		}
	})

這段代碼定義了一個my-component組件，<my-component><my-component>不是標準的HTML元素，瀏覽器是不理解這個元素的。
那麼Vue是如何讓瀏覽器理解<my-component><my-component>標籤的呢？（下圖是我我的的理解）json

image

在建立一個Vue實例時，除了將它掛載到某個HTML元素下，還要編譯組件，將組件轉換爲HTML片斷。
除此以外，Vue實例還會識別其所掛載的元素下的<my-component>標籤，而後將<my-component>標籤替換爲HTML片斷。api

實際上瀏覽器仍然是不理解<my-component>標籤的，咱們能夠經過查看源碼瞭解到這一點。數組

image

組件在使用前，通過編譯已經被轉換爲HTML片斷了，組件是有一個做用域的，那麼組件的做用域是什麼呢？
你能夠將它理解爲組件模板包含的HTML片斷，組件模板內容以外就不是組件的做用域了。
例如，my-component組件的做用域只是下面這個小片斷。

image

組件的模板是在其做用域內編譯的，那麼組件選項對象中的數據也應該是在組件模板中使用的。
考慮下面的代碼，在Vue實例和組件的data選項中分別追加一個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標籤上使用指令 v-show="display"，這個display數據是來源於Vue實例，仍是my-component組件呢？ 
<div id="app">
	<my-component v-show="display">
	</my-component>
</div>

答案是Vue實例。

至此，咱們應該認識到組件的做用域是獨立的：

父組件模板的內容在父組件做用域內編譯；子組件模板的內容在子組件做用域內編譯

通俗地講，在子組件中定義的數據，只能用在子組件的模板。在父組件中定義的數據，只能用在父組件的模板。若是父組件的數據要在子組件中使用，則須要子組件定義props。

使用Slot

爲了讓組件能夠組合，咱們須要一種方式來混合父組件的內容與子組件本身的模板。這個處理稱爲內容分發，Vue.js 實現了一個內容分發 API，使用特殊的 <slot> 元素做爲原始內容的插槽。

若是不理解這段話，能夠先跳過，你只要知道<slot>元素是一個內容插槽。

單個Slot

下面的代碼在定義my-component組件的模板時，指定了一個<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>若是沒有分發內容，則顯示slot中的內容</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>

這段代碼運行結果以下：

image

第一個<my-component>標籤有一段分發內容<h1>Hello Vue.js!</h1>，渲染組件時顯示了這段內容。image

第二個<my-component>標籤則沒有，渲染組件時則顯示了slot標籤中的內容。

View Demo

指定名稱的slot

上面這個示例是一個匿名slot，它只能表示一個插槽。若是須要多個內容插槽，則能夠爲slot元素指定name屬性。

多個slot一塊兒使用時，會很是有用。例如，對話框是HTML經常使用的一種交互方式。
在不一樣的運用場景下，對話框的頭部、主體內容、底部多是不同的。

image

這時，使用不一樣名稱的slot就能輕易解決這個問題了。

<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時，咱們使用了3個slot，它們的name特性分別是header、body和footer。

在<modal-dialog>標籤下，分別爲三個元素指定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>你想在對話框中放什麼內容均可以！</p>
			<p>你能夠放一段文字，也能夠放一些表單，或者是一些圖片。</p>
		</div>

		<footer class="dialog-footer" slot="footer">
			<button class="btn" @click="closeDialog">關閉</button>
		</footer>
	</modal-dialog>

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

對話框的標題內容、主體內容、底部內容，徹底由咱們自定義，並且這些內容就是一些簡單的HTML元素！

View Demo

12

若是須要定製對話框的樣式，咱們只須要在<modal-dialog>上追加一個v-bind指令，讓它綁定一個class。

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

而後修改一下Vue實例，在data選項中追加一個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

13

雖然咱們在modal-dialog組件中定義了3個slot，可是在頁面中使用它時，並不用每次都指定這3個slot。
好比，有時候咱們可能只須要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>你想在對話框中放什麼內容均可以！</p>
		<p>你能夠放一段文字，也能夠放一些表單，或者是一些圖片。</p>
	</div>
</modal-dialog>

如今看到的對話框是沒有底部的，只有標題和主體內容。

View Demo

14

多個slot同時使用的場景還有不少，例如：用戶的註冊、登陸、找回密碼等這些表單集合，也能夠用一個組件來完成。

父子組件之間的訪問

有時候咱們須要父組件訪問子組件，子組件訪問父組件，或者是子組件訪問根組件。
針對這幾種狀況，Vue.js都提供了相應的API：

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

$children示例

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

在父組件中，經過this.$children能夠訪問子組件。
this.$children是一個數組，它包含全部子組件的實例。

<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">顯示子組件的數據</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

15

$refs示例

組件個數較多時，咱們難以記住各個組件的順序和位置，經過序號訪問子組件不是很方便。
在子組件上使用v-ref指令，能夠給子組件指定一個索引ID：

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

在父組件中，則經過$refs.索引ID訪問子組件的實例：

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

$parent示例

下面這段代碼定義了兩個組件：child-component和它的父組件parent-component。
在子組件中，經過this.$parent能夠訪問到父組件的實例。

<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">顯示父組件的數據</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

16

注意：儘管能夠訪問父鏈上任意的實例，不過子組件應當避免直接依賴父組件的數據，儘可能顯式地使用 props 傳遞數據。另外，在子組件中修改父組件的狀態是很是糟糕的作法，由於：
1.這讓父組件與子組件緊密地耦合；
2. 只看父組件，很難理解父組件的狀態。由於它可能被任意子組件修改！理想狀況下，只有組件本身能修改它的狀態。

自定義事件

有時候咱們但願觸發父組件的某個事件時，能夠通知到子組件；觸發子組件的某個事件時，能夠通知到父組件。
Vue 實例實現了一個自定義事件接口，用於在組件樹中通訊。這個事件系統獨立於原生 DOM 事件，用法也不一樣。

每一個 Vue 實例都是一個事件觸發器：

  • 使用 $on() 監聽事件；
  • 使用 $emit() 在它上面觸發事件；
  • 使用 $dispatch() 派發事件，事件沿着父鏈冒泡；
  • 使用 $broadcast() 廣播事件，事件向下傳導給全部的後代。

派發事件

下面這段代碼是一個簡單的事件派發處理

<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>
	// 註冊子組件
	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

咱們將這個示例分爲幾個步驟解讀：

  1. 子組件的button元素綁定了click事件，該事件指向notify方法
  2. 子組件的notify方法在處理時，調用了$dispatch，將事件派發到父組件的child-msg事件，並給該該事件提供了一個msg參數
  3. 父組件的events選項中定義了child-msg事件，父組件接收到子組件的派發後，調用child-msg事件。

image

運行結果以下：

17

廣播事件

下面這段代碼是一個簡單的事件廣播處理

<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>
	// 註冊子組件
	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

咱們將這個示例分爲幾個步驟解讀：

  1. 父組件的button元素綁定了click事件，該事件指向notify方法
  2. 父組件的notify方法在處理時，調用了$broadcast，將事件派發到子組件的parent-msg事件，並給該該事件提供了一個msg參數
  3. 子組件的events選項中定義了parent-msg事件，子組件接收到父組件的廣播後，調用parent-msg事件。

image

運行結果以下：

18

CURD示例

Vue.js組件的API來源於三部分——prop，slot和事件。

  • prop 容許外部環境傳遞數據給組件；
  • 事件 容許組件觸發外部環境的 action；
  • slot 容許外部環境插入內容到組件的視圖結構內。

至此，這三部分我都已經介紹完了，接下來我就用這些知識來教你們一步一步完成一個CURD示例。

第1步——建立表格組件，添加查詢和刪除功能

建立表格組件，添加過濾，數據刪除功能

<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>

20[3]

View Demo

使用知識點

1. 使用Vue.component語法糖

Vue.component是建立並註冊組件的語法糖，使用Vue.component註冊的組件是全局的。

2. 使用prop將父組件數據傳遞給子組件

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

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

3. 使用過濾器

{{ col.name | capitalize}}使用了capitalize過濾器，將字符串的首字母轉換爲大寫後輸出。
filterBy filterKey使用了filterBy過濾器，根據指定條件過濾數組元素，filterBy返回過濾後的數組。

4. 使用數組索引別名

數組默認的索引名稱爲$index，v-for="(index,entry) in dataList使用了數組索引別名。
括號中的第一個參數index是$index的別名，第二個參數是遍歷的數組元素。

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步——建立對話框組件

表格數據的添加和修改，咱們使用模態對話框來實現。
模態對話框有兩種模式，新建模式和修改模式，分別用於新建一條數據和修改指定的數據。
因爲對話框的內容來源於具體的數據，因此咱們能夠考慮將對話框做爲simple-grid組件的一個子組件。

modal-dialog組件的模板內容：

<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組件中註冊：

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

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

因爲modal-dialog組件是simple-grid的子組件，因此它應該在simple-grid的template中使用：

<template id="grid-template">
	<!--...前面的內容已省略	-->
	<modal-dialog :mode="mode" :title="title" :fields="columns" :item="item">
	</modal-dialog>
	<!--...後面的內容已省略	-->
</template>

modal-dialog組件的props選項，追加了3個元素：

  • title表示對話框的標題內容
  • fields表示對話框要顯示的數據字段數組
  • item用於綁定表單字段，它是一個對象

注意：因爲modal-dialog是一個子組件，它僅用於simple-grid組件的新增或修改模式，因此modal-dialog的template沒有使用 <slot>元素

使用知識點

1. 使用組件的局部註冊

modal-dialog組件沒有使用Vue.component進行全局註冊，使用simple-grid組件components選項實現了局部註冊。

2. 使用組件的data選項

組件的data選項必須以函數的方式返回。

第3步——實現數據新建功能

21

View Demo

1. 修改Vue實例的data選項的columns：

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

爲'name'列追加一個isKey屬性，並設置爲true，表示該列爲主鍵列。
爲'sex'列追加一個dataSoruce屬性，並設置爲['Male', 'Female']，表示新增或修改數據時選擇性別的下拉框數據源。

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的名稱。
在渲染表單時，根據是否有dataSource斷定表單是下拉框仍是文本框。
（因爲示例較爲簡陋，因此只提供了input和select兩種表單類型）

注意modal-dialog組件的fields是由Vue實例傳遞給simple-grid，而後再由simple-grid傳遞過來的。

image

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>

添加一個Create按鈕，綁定click事件到openNewItemDiaolog()方法，該方法用於打開modal-dialog組件，並將模式設置爲新建模式。
在<modal-dialog>標籤上給sample-grid綁定一個自定義事件create-item，後面在$dispatch派發事件時會用到。

4. 修改simple-grid的methods選項

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

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

追加了兩個方法：opeNewItemDialog和createItem方法。

opeNewItemDialog方法用於打開對話框，this.$broadcast('showDialog', true) 調用子組件modal-dialog的showDialog事件，傳入參數true表示顯示對話框。

createItem方法用於保存新建的數據，this.$broadcast('showDialog', false) 調用子組件modal-dialog的showDialog事件，傳入參數false表示隱藏對話框。

5. 修改modal-grid的methods和events選項

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

修改methods選項的save方法，因爲保存按鈕是在子組件modal-dialog中的，而createItem方法是在父組件simple-grid中的，因此這裏使用this.$dispatch('create-item') 派發到父組件的自定義事件create-item。

追加events選項，添加showDialog事件，用於顯示或隱藏對話框。

請將4和5結合起來看，咱們既用到了$broadcast廣播事件，又用到了$dispatch派發事件。
下面這幅圖有助於理解simple-grid和modal-dialog組件之間的通訊：

image

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

第4步——實現數據修改功能

22

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>

遍歷列表數據時，使用v-if指令判斷當前列是否爲主鍵列，若是是主鍵列，則給主鍵列添加連接，而後給連接綁定click事件，click事件用於打開修改數據的對話框。
在<modal-dialog>標籤上，給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），若是當前字段是主鍵字段，則禁止修改。

3. 修改sample-grid的methods選項

// 彈出修改數據的對話框時，使用對象的深拷貝
initItemForUpdate: function(p) {
	var c = c || {};
	for (var i in p) {
		// 屬性i是否爲p對象的自有屬性
		if (p.hasOwnProperty(i)) {
			if (typeof p[i] === 'object') {
				c[i] = Array.isArray(p[i]) ? [] : {}
				deepCopy(p[i], c[i])
			} else {
				// 屬性是基礎類型時，直接拷貝
				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)
	// 廣播事件，傳入參數false表示隱藏對話框
	this.$broadcast('showDialog', false)
	// 新建完數據後，重置item對象
	this.item = {}
},
updateItem: function() {
	// 獲取主鍵列
	var keyColumn = this.keyColumn

	for (var i = 0; i < this.dataList.length; i++) {
		// 根據主鍵查找要修改的數據，而後將this.item數據更新到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;
		}
	}
	// 廣播事件，傳入參數false表示隱藏對話框
	this.$broadcast('showDialog', false)
	// 修改完數據後，重置item對象
	this.item = {}
}

追加的內容：調用內置的ready()函數，openEditDialog、updateItem、findItemByKey和initItemForUpdate方法。

ready()函數會在編譯結束和 $el 第一次插入文檔以後調用，你能夠將其理解爲jQuery中的document.ready()。
在ready()函數中，初始化keyColumn，keyColumn表示主鍵列，調用updateItem方法時，會根據主鍵數據找到dataList中匹配的元素。

opeEditItemDialog方法用於打開對話框，this.$broadcast('showDialog', true) 調用子組件modal-dialog的showDialog事件，傳入參數true表示顯示對話框。

ready()函數沒有特別的業務邏輯，主要是獲取主鍵列，調用updateItem方法時，會根據主鍵數據找到dataList中匹配的元素。

updateItem方法用於保存修改的數據，this.$broadcast('showDialog', false) 調用子組件modal-dialog的showDialog事件，傳入參數false表示隱藏對話框。

initItemForUpdate方法用於將選中的數據this.dataList[index]深拷貝到this.item。爲何要使用深拷貝呢？由於this.dataList[index]是一個引用對象，它有一些屬性也是引用類型的，若是使用淺拷貝可能獲得一些超出預期的效果。

image

4.修改modal-dialog的methods選項

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

修改methods選項中的save方法，this.mode === 2時，將事件派發到父組件的update-item事件。

第5步——修改數據新建功能

23

View Demo

修改sample-grid的methods選項，追加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)
		// 廣播事件，傳入參數false表示隱藏對話框
		this.$broadcast('showDialog', false)
		// 新建完數據後，重置item對象
		this.item = {}
	} else {
		alert(keyColumn + ' "' + this.item[keyColumn] + '" is already exists')
	}

}

因爲主鍵列數據是不能重複的，因此在新增數據時須要判斷主鍵列數據是否已經存在。

總結

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

  • prop 容許外部環境傳遞數據給組件；
  • 事件 容許組件觸發外部環境的 action；
  • slot 容許外部環境插入內容到組件的視圖結構內。

這三大知識點在上下兩篇文章中都體現出來了，限於篇幅和我的知識的匱乏，我並不能將組件的全部特性都描述出來，這還須要靠各位花一些時間去多多瞭解官網的API，並付諸實踐。

若是要構建一些大型的應用，基於組件的開發模式是一個不錯的選擇，咱們將整個系統拆分紅一個一個小組件，就像樂高同樣，而後將這些組件拼接起來。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程