概述

上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义 props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。”

今天我们将着重介绍 slot 和父子组件之间的访问和通信，slot 是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue 的事件系统独立于原生的 DOM 事件，它用于组件之间的通信。

本文的主要内容如下：

• 组件的编译作用域
• 在组件 template 中使用 <slot> 标签作为内容插槽
• 使用 $children, $refs, $parent 实现父子组件之间的实例访问
• 在子组件中，使用 $dispatch 向父组件派发事件；在父组件中，使用 $broadcast 向子组件传播事件
• 结合这些基础知识，我们一步一步实现一个 CURD 的示例

Demo 和源代码已放到 GitHub，如果您觉得本篇内容不错，请点个赞，或在 GitHub 上加个星星！

注意：以下示例的组件模板都定义在 <template> 标签中，然而 IE 不支持 <template> 标签，这使得在 IE 中 <template> 标签中的内容会显示出来。解决办法——隐藏 <template> 标签

template{display: none;}

个浏览器对 <template> 标签的支持情况，请参见：http://caniuse.com/#feat=template

编译作用域

尽管使用组件就像使用一般的 HTML 元素一样，但它毕竟不是标准的 HTML 元素，为了让浏览器能够识别它，组件会被解析为标准的 HTML 片段，然后将组件的标签替换为该 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)
}
}
}
}
})

这段代码定义了一个 my-component 组件，<my-component><my-component> 不是标准的 HTML 元素，浏览器是不理解这个元素的。
那么 Vue 是如何让浏览器理解 <my-component><my-component> 标签的呢？（下图是我个人的理解）

在创建一个 Vue 实例时，除了将它挂载到某个 HTML 元素下，还要编译组件，将组件转换为 HTML 片段。
除此之外，Vue 实例还会识别其所挂载的元素下的 <my-component> 标签，然后将 <my-component> 标签替换为 HTML 片段。

实际上浏览器仍然是不理解 <my-component> 标签的，我们可以通过查看源码了解到这一点。

组件在使用前，经过编译已经被转换为 HTML 片段了，组件是有一个作用域的，那么组件的作用域是什么呢？
你可以将它理解为组件模板包含的 HTML 片段，组件模板内容之外就不是组件的作用域了。
例如，my-component 组件的作用域只是下面这个小片段。

组件的模板是在其作用域内编译的，那么组件选项对象中的数据也应该是在组件模板中使用的。
考虑下面的代码，在 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>
&lt;my-component&gt;
&lt;/my-component&gt;

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

这段代码运行结果如下：

第一个 <my-component> 标签有一段分发内容<h1>Hello Vue.js!</h1>，渲染组件时显示了这段内容。

第二个 <my-component> 标签则没有，渲染组件时则显示了 slot 标签中的内容。

View Demo

指定名称的 slot

上面这个示例是一个匿名 slot，它只能表示一个插槽。如果需要多个内容插槽，则可以为 slot 元素指定 name 属性。

多个 slot 一起使用时，会非常有用。例如，对话框是 HTML 常用的一种交互方式。
在不同的运用场景下，对话框的头部、主体内容、底部可能是不一样的。

这时，使用不同名称的 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">
	&lt;header class="dialog-header" slot="header"&gt;
		&lt;h1 class="dialog-title"&gt;提示信息&lt;/h1&gt;
	&lt;/header&gt;

	&lt;div class="dialog-body" slot="body"&gt;
		&lt;p&gt;你想在对话框中放什么内容都可以！&lt;/p&gt;
		&lt;p&gt;你可以放一段文字，也可以放一些表单，或者是一些图片。&lt;/p&gt;
	&lt;/div&gt;

	&lt;footer class="dialog-footer" slot="footer"&gt;
		&lt;button class="btn" @click="closeDialog"&gt;关闭&lt;/button&gt;
	&lt;/footer&gt;
&lt;/modal-dialog&gt;

&lt;button class="btn btn-open" @click="openDialog"&gt;打开对话框&lt;/button&gt;

</div>

对话框的标题内容、主体内容、底部内容，完全由我们自定义，而且这些内容就是一些简单的 HTML 元素！

View Demo

如果需要定制对话框的样式，我们只需要在 <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

虽然我们在 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>
&lt;div class="dialog-body" slot="body"&gt;
	&lt;p&gt;你想在对话框中放什么内容都可以！&lt;/p&gt;
	&lt;p&gt;你可以放一段文字，也可以放一些表单，或者是一些图片。&lt;/p&gt;
&lt;/div&gt;

</modal-dialog>

现在看到的对话框是没有底部的，只有标题和主体内容。

View Demo

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

$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

注意：尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 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事件。

运行结果如下：

广播事件

下面这段代码是一个简单的事件广播处理

<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事件。

运行结果如下：

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>
&lt;/div&gt;
&lt;div class="container"&gt;
	&lt;simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"&gt;
	&lt;/simple-grid&gt;
&lt;/div&gt;

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

使用知识点

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 步——实现数据新建功能

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>
			&lt;div v-for="field in fields" class="form-group" &gt;
					&lt;label&gt;{{ field.name }}&lt;/label&gt;
					&lt;select v-if="field.dataSource" v-model="item[field.name]"&gt;
						&lt;option v-for="opt in field.dataSource" :value="opt"&gt;{{ opt }}&lt;/option&gt;
					&lt;/select&gt;
					&lt;input v-else type="text" v-model="item[field.name]"&gt;
			&lt;/div&gt;

			&lt;footer class="form-group"&gt;
				&lt;label&gt;&lt;/label&gt;
				&lt;button v-on:click="save"&gt;Save&lt;/button&gt;
				&lt;button v-on:click="close"&gt;Close&lt;/button&gt;
			&lt;/footer&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="dialog-overlay"&gt;&lt;/div&gt;
&lt;/div&gt;

</template>

在 modal-dialog 组件的模板中遍历 fields，然后显示 field 的名称。
在渲染表单时，根据是否有 dataSource 判定表单是下拉框还是文本框。
（由于示例较为简陋，所以只提供了 input 和 select 两种表单类型）

注意 modal-dialog 组件的 fields 是由 Vue 实例传递给 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>
&lt;modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" v-on:create-item="createItem"&gt;
&lt;/modal-dialog&gt;

</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 组件之间的通信：

create-item是一个自定义事件，由子组件 modal-dialog 调用this.$dispatch('create-item') 派发到自定义事件create-item，自定义事件create-item是绑定在父组件 simple-grid 上的，该事件会执行createItem方法。

第 4 步——实现数据修改功能

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 &lt; 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]是一个引用对象，它有一些属性也是引用类型的，如果使用浅拷贝可能得到一些超出预期的效果。

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 步——修改数据新建功能

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，并付诸实践。

如果要构建一些大型的应用，基于组件的开发模式是一个不错的选择，我们将整个系统拆分成一个一个小组件，就像乐高一样，然后将这些组件拼接起来。