<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步——实现数据新建功能
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> <div> <div v-bind:class="{ 'dialog-active': show }"> <div> <header> <h1>{{ title }}</h1> </header> <div v-for="field in fields" > <label>{{ field.name }}</label> <select v-if="field.dataSource" v-model="item[field.name]"> <option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option> </select> <input v-else type="text" v-model="item[field.name]"> </div> <footer> <label></label> <button v-on:click="save">Save</button> <button v-on:click="close">Close</button> </footer> </div> </div> <div></div> </div> </template>
在modal-dialog组件的模板中遍历fields，然后显示field的名称。
在渲染表单时，根据是否有dataSource判定表单是下拉框还是文本框。
（由于示例较为简陋，所以只提供了input和select两种表单类型）
注意modal-dialog组件的fields是由Vue实例传递给simple-grid，然后再由simple-grid传递过来的。
3. 修改simple-grid的template
<template> <!--...已省略 --> <div> <button @click="openNewItemDialog('Create new item')">Create</button> </div> <modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" v-on:create-item="createItem"> </modal-dialog> </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选项