Vue.js60分钟组件快速入门（下篇） - keepfool(5)_H5之家

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选项

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组件之间的通信：