有时候，我们希望触发父组件的某个事件时，可以通知到子组件；触发子组件的某个事件时，可以通知到父组件。
Vue实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生DOM事件，用法也不同。
每个Vue实例都是一个事件触发器：
- 使用 $on() 监听事件；
- 使用 $emit() 在它上面触发事件（子组件向父组件传递）；
- 使用 $dispatch() 派发事件，事件沿着父链冒泡；
- 使用 $broadcast() 广播事件，事件向下传导给所有的后代。（父组件向子组件传递）
派发事件
下面这段代码是一个简单的事件派发处理
1.png
2.png
3.png
我们将这个示例分为几个步骤解读：
- 子组件的button元素绑定了click事件，该事件指向notify方法
- 子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该事件提供了一个msg参数
- 父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件
dispatch.jpg
运行结果如下：
dispatch.gif
广播事件
下面这段代码是一个简单的事件广播处理
$broadcast.jpg
我们将这个示例分为几个步骤解读：
- 父组件的button元素绑定了click事件，该事件指向notify方法
- 父组件的notify方法在处理时，调用了$broadcast，将事件派发到子组件的parent-msg事件，并给该事件提供了一个msg参数
- 子组件的events选项中定义了parent-msg事件，子组件接收到父组件的广播后，调用parent-msg事件
cf640d3.jpg
运行结果如下：
result.gif
CURD示例
Vue.js组件的API来源于三部分———prop,slot和事件
- prop 允许外部环境传递数据给组件；
- 事件 允许组件触发外部环境的action；
- slot 允许外部环境插入内容到组件的视图结构内
接下来就用这些知识交大家完成一个CURD实例。
<b>第一步——创建表格组件，添加查询和删除功能</b>
创建表格组件，添加过滤，数据删除功能
CURD示例.jpg
result.gif
<b>使用知识点</b>
-
使用Vue.component语法糖
Vue.component是创建并注册组件的语法糖，使用Vue.component注册的组件时全局的。 -
使用prop将父组件数据传递个子组件
‘#app元素时父组件，simple-grid是子组件
在simple-grid组件中定义选项props：['dataList','columns','searchKey']
在#app下使用<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery">将数据传递给simple-grid组件 -
使用过滤器
{{col.name | capitalize}}使用了capitalize过滤器，将字符串的首字母转换为大写后输出。
filterBy filterKey使用了filterBy过滤器，根据指定条件过滤数组元素，filterBy返回过滤后的数组。 -
使用数组索引别名
数组默认的索引名称为$index,v-for="(index,entry) in dataList"使用了数组索引别名。
括号中的第一个参数index是$index的别名，第二个参数是遍历的数组元素。 -
使用了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的缩写
<b>第二步——创建对话框组件</b>
表格数据的添加和修改，我们使用模态对话框来实现。
模态对话框有两种模式，新建模式和修改模式，分别用于新建一条数据和修改指定的数据。
由于对话框的内容来源于具体的数据，所以我们可以考虑将对话框作为simple-grid组件的一个子组件。
model-dialog组件的模板内容：
网友评论