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步——实现数据修改功能
1. 修改sample-grid的template
<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"> <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方法。