上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。”
今天我们将着重介绍slot和父子组件之间的访问和通信，slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件，它用于组件之间的通信。
本文的主要内容如下：
组件的编译作用域 在组件template中使用Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！
对话框组件示例1 对话框组件示例2 对话框组件示例3 派发事件示例 广播事件示例 CURD示例 GitHub Source注意：以下示例的组件模板都定义在标签中，然而IE不支持标签，这使得在IE中标签中的内容会显示出来。解决办法——隐藏标签
template{ display: none;}
个浏览器对标签的支持情况，请参见：http://caniuse.com/#feat=template
编译作用域尽管使用组件就像使用一般的HTML元素一样，但它毕竟不是标准的HTML元素，为了让浏览器能够识别它，组件会被解析为标准的HTML片段，然后将组件的标签替换为该HTML片段。
组件在使用前，经过编译已经被转换为HTML片段了，组件是有一个作用域的，那么组件的作用域是什么呢？你可以将它理解为组件模板包含的HTML片段，组件模板内容之外就不是组件的作用域了。例如，my-component组件的作用域只是下面这个小片段。
组件的模板是在其作用域内编译的，那么组件选项对象中的数据也应该是在组件模板中使用的。考虑下面的代码，在Vue实例和组件的data选项中分别追加一个display属性：
new Vue { return { msg: "This is a component!", display: false } }, methods: { showMsg: function { alert } } } }})然后在my-component标签上使用指令v-show="display"，这个display数据是来源于Vue实例，还是my-component组件呢？
第一个
第二个
这时，使用不同名称的slot就能轻易解决这个问题了。
在定义modal-dialog组件的template时，我们使用了3个slot，它们的name特性分别是header、body和footer。
在
如果需要定制对话框的样式，我们只需要在
虽然我们在modal-dialog组件中定义了3个slot，但是在页面中使用它时，并不用每次都指定这3个slot。比如，有时候我们可能只需要header和body：
多个slot同时使用的场景还有很多，例如：用户的注册、登录、找回密码等这些表单集合，也可以用一个组件来完成。
父子组件之间的访问有时候我们需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。针对这几种情况，Vue.js都提供了相应的API：
父组件访问子组件：使用$children或$refs 子组件访问父组件：使用$parent 子组件访问根组件：使用$root$children示例下面这段代码定义了3个组件：父组件parent-component，两个子组件child-component1和child-component2。
在父组件中，通过this.$children可以访问子组件。this.$children是一个数组，它包含所有子组件的实例。
View Demo
$refs示例组件个数较多时，我们难以记住各个组件的顺序和位置，通过序号访问子组件不是很方便。在子组件上使用v-ref指令，可以给子组件指定一个索引ID：
在父组件中，则通过$refs.索引ID访问子组件的实例：
showChildComponentData: function { alert; alert;}$parent示例
下面这段代码定义了两个组件：child-component和它的父组件parent-component。在子组件中，通过this.$parent可以访问到父组件的实例。
View Demo
注意：尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为： 1.这让父组件与子组件紧密地耦合； 2. 只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。
自定义事件有时候我们希望触发父组件的某个事件时，可以通知到子组件；触发子组件的某个事件时，可以通知到父组件。Vue 实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生 DOM 事件，用法也不同。
每个 Vue 实例都是一个事件触发器：
使用$on 监听事件；使用 $emit 在它上面触发事件；使用 $dispatch 派发事件，事件沿着父链冒泡；使用 $broadcast 广播事件，事件向下传导给所有的后代。派发事件下面这段代码是一个简单的事件派发处理
Messages: {{ messages | json }}
运行结果如下：
广播事件下面这段代码是一个简单的事件广播处理
运行结果如下：
CURD示例Vue.js组件的API来源于三部分——prop，slot和事件。
prop 允许外部环境传递数据给组件；事件 允许组件触发外部环境的 action；slot 允许外部环境插入内容到组件的视图结构内。至此，这三部分我都已经介绍完了，接下来我就用这些知识来教大家一步一步完成一个CURD示例。
第1步——创建表格组件，添加查询和删除功能创建表格组件，添加过滤，数据删除功能
View Demo
使用知识点1. 使用Vue.component语法糖
Vue.component是创建并注册组件的语法糖，使用Vue.component注册的组件是全局的。
2. 使用prop将父组件数据传递给子组件
#app元素是父组件，simple-grid是子组件。
在simple-grid组件中定义选项props: ["dataList", "columns", "searchKey"]在#app下使用
3. 使用过滤器
{{ col.name | capitalize}}使用了capitalize过滤器，将字符串的首字母转换为大写后输出。filterBy filterKey使用了filterBy过滤器，根据指定条件过滤数组元素，filterBy返回过滤后的数组。
4. 使用数组索引别名
数组默认的索引名称为$index，v-for=" in dataList使用了数组索引别名。括号中的第一个参数index是$index的别名，第二个参数是遍历的数组元素。
5. 使用了v-bind和v-on指令的缩写
:data-list是v-bind:data-list的缩写，:columns是v-bind:columns的缩写，:search-key是v-bind:search-key的缩写。
使用了v-on指令的缩写，@click是v-on:click的缩写。
表格数据的添加和修改，我们使用模态对话框来实现。模态对话框有两种模式，新建模式和修改模式，分别用于新建一条数据和修改指定的数据。由于对话框的内容来源于具体的数据，所以我们可以考虑将对话框作为simple-grid组件的一个子组件。
modal-dialog组件的模板内容：
{{ title }}
modal-dialog组件在simple-grid组件中注册：
Vue.component { return { mode: 0, item: {} } }, 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中使用：
View Demo
1. 修改Vue实例的data选项的columns：
var demo = new Vue
为"name"列追加一个isKey属性，并设置为true，表示该列为主键列。为"sex"列追加一个dataSoruce属性，并设置为["Male", "Female"]，表示新增或修改数据时选择性别的下拉框数据源。
2. 修改modal-dialog的template:
3. 修改simple-grid的template View Demo 1. 修改sample-grid的template 4.修改modal-dialog的methods选项 save: function { //新建模式 if { // 使用$dispatch调用simple-grid的create-item事件 this.$dispatch }else if{ // 使用$dispatch调用simple-grid的update-item事件 this.$dispatch }} 修改methods选项中的save方法，this.mode === 2时，将事件派发到父组件的 View Demo 修改sample-grid的methods选项，追加itemExists方法，然后修改createItem方法。 itemExists: function { for { if return true; } return false;},createItem: function { var keyColumn = this.getKeyColumn if ) { // 将item追加到dataList this.dataList.push // 广播事件，传入参数false表示隐藏对话框 this.$broadcast // 新建完数据后，重置item对象 this.item = {} } else { alert }} 由于主键列数据是不能重复的，所以在新增数据时需要判断主键列数据是否已经存在。 说到底，组件的API主要来源于以下三部分： 这三大知识点在上下两篇文章中都体现出来了，限于篇幅和个人知识的匮乏，我并不能将组件的所有特性都描述出来，这还需要靠各位花一些时间去多多了解官网的API，并付诸实践。 如果要构建一些大型的应用，基于组件的开发模式是一个不错的选择，我们将整个系统拆分成一个一个小组件，就像乐高一样，然后将这些组件拼接起来。{{ title }}
create-item是一个自定义事件，由子组件modal-dialog调用this.$dispatch 派发到自定义事件create-item，自定义事件create-item是绑定在父组件simple-grid上的，该事件会执行createItem方法。 {{entry[col.name]}} {{entry[col.name]}} update-item事件。
