前端框架：Vue-自定义事件

有时候，我们希望触发父组件的某个事件时，可以通知到子组件；触发子组件的某个事件时，可以通知到父组件。

Vue实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生DOM事件，用法也不同。

每个Vue实例都是一个事件触发器：

1. 使用 $on() 监听事件；
2. 使用 $emit() 在它上面触发事件（子组件向父组件传递）；
3. 使用 $dispatch() 派发事件，事件沿着父链冒泡；
4. 使用 $broadcast() 广播事件，事件向下传导给所有的后代。（父组件向子组件传递）
   
   

派发事件

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

1.png

2.png

3.png

我们将这个示例分为几个步骤解读：

1. 子组件的button元素绑定了click事件，该事件指向notify方法
2. 子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该事件提供了一个msg参数
3. 父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件

dispatch.jpg

运行结果如下：

dispatch.gif

广播事件

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

$broadcast.jpg

我们将这个示例分为几个步骤解读：

1. 父组件的button元素绑定了click事件，该事件指向notify方法
2. 父组件的notify方法在处理时，调用了$broadcast，将事件派发到子组件的parent-msg事件，并给该事件提供了一个msg参数
3. 子组件的events选项中定义了parent-msg事件，子组件接收到父组件的广播后，调用parent-msg事件

cf640d3.jpg

运行结果如下：

result.gif

CURD示例

Vue.js组件的API来源于三部分———prop,slot和事件

• prop 允许外部环境传递数据给组件；
• 事件 允许组件触发外部环境的action；
• slot 允许外部环境插入内容到组件的视图结构内
  
  

接下来就用这些知识交大家完成一个CURD实例。

第一步——创建表格组件，添加查询和删除功能

创建表格组件，添加过滤，数据删除功能

CURD示例.jpg

result.gif

使用知识点

1. 使用Vue.component语法糖
   
   Vue.component是创建并注册组件的语法糖，使用Vue.component注册的组件时全局的。
   

2. 使用prop将父组件数据传递个子组件
   
   ‘#app元素时父组件，simple-grid是子组件
   
   在simple-grid组件中定义选项props：['dataList','columns','searchKey']
   
   在#app下使用将数据传递给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指令的缩写
   
   使用了v-bind指令的缩写。 :data-list是v-bind:data-list的缩写； :columns是v-bind:columns的缩写； :search-key是v-bind:search-key的缩写。
   
   delete使用了v-on指令的缩写，@click是v-on:click的缩写
   

第二步——创建对话框组件

表格数据的添加和修改，我们使用模态对话框来实现。

模态对话框有两种模式，新建模式和修改模式，分别用于新建一条数据和修改指定的数据。

由于对话框的内容来源于具体的数据，所以我们可以考虑将对话框作为simple-grid组件的一个子组件。

model-dialog组件的模板内容：