<script src="../js/vue.js">

使用知识点

1. 使用Vue.component语法糖

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

2. 使用prop将父组件数据传递给子组件

#app元素是父组件，simple-grid是子组件。

在simple-grid组件中定义选项props: ['dataList','searchKey']在#app下使用将数据传递给simple-grid组件

3. 使用过滤器

{{ col.name | capitalize}}使用了，将字符串的首字母转换为大写后输出。filterBy filterKey使用了，根据指定条件过滤数组元素，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的缩写。

使用了v-on指令的缩写，@click是v-on:click的缩写。

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

表格数据的添加和修改，我们使用模态对话框来实现。模态对话框有两种模式，新建模式和修改模式，分别用于新建一条数据和修改指定的数据。由于对话框的内容来源于具体的数据，所以我们可以考虑将对话框作为simple-grid组件的一个子组件。

modal-dialog组件的模板内容：

modal-dialog组件在simple-grid组件中注册：

            }
        }
    }
}
// ...已省略

})

由于modal-dialog组件是simple-grid的子组件，所以它应该在simple-grid的template中使用：

• title表示对话框的标题内容
• fields表示对话框要显示的数据字段数组
• item用于绑定表单字段，它是一个对象

注意：由于modal-dialog是一个子组件，它仅用于simple-grid组件的新增或修改模式，所以modal-dialog的template没有使用元素

使用知识点

1. 使用组件的局部注册

modal-dialog组件没有使用Vue.component进行全局注册，使用simple-grid组件components选项实现了局部注册。

2. 使用组件的data选项

组件的data选项必须以函数的方式返回。

第3步——实现数据新建功能

1. 修改Vue实例的data选项的columns：

为'name'列追加一个isKey属性，并设置为true，表示该列为主键列。为'sex'列追加一个dataSoruce属性，并设置为['Male','Female']，表示新增或修改数据时选择性别的下拉框数据源。
2. 修改modal-dialog的template:
                
            <div v-for="field in fields" class="form-group" >
                    <label>{{ field.name }}</label>
                    <select v-if="field.dataSource" v-model="item[field.name]"&gt;
                        <option v-for="opt in field.dataSource" :value="opt"&gt;{{ opt }}</option>
                    </select>
                    <input v-else type="text" v-model="item[field.name]"&gt;
            </div>

            <footer class="form-group"&gt;
                <label></label>
                <button v-on:click="save"&gt;Save</button>
                <button v-on:click="close"&gt;Close</button>
            </footer>
        </div>
    </div>
    <div class="dialog-overlay"&gt;</div>
</div>


在modal-dialog组件的模板中遍历fields，然后显示field的名称。在渲染表单时，根据是否有dataSource判定表单是下拉框还是文本框。（由于示例较为简陋，所以只提供了input和select两种表单类型）
注意modal-dialog组件的fields是由Vue实例传递给simple-grid，然后再由simple-grid传递过来的。

3. 修改simple-grid的template
    

    
<modal-dialog :mode="mode" :title="title" :fields="columns" :item="item" v-on:create-item="createItem"&gt;
</modal-dialog>


添加一个Create按钮，绑定click事件到openNewItemDiaolog()方法，该方法用于打开modal-dialog组件，并将模式设置为新建模式。在标签上给sample-grid绑定一个自定义事件create-item，后面在$dispatch派发事件时会用到。
4. 修改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选项

修改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
    

{{ field.name }}
    
    
    

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 = {}

修改methods选项中的save方法，this.mode === 2时，将事件派发到父组件的update-item事件。
第5步——修改数据新建功能


修改sample-grid的methods选项，追加itemExists方法，然后修改createItem方法。
}


由于主键列数据是不能重复的，所以在新增数据时需要判断主键列数据是否已经存在。
总结
说到底，组件的API主要来源于以下三部分：


prop 允许外部环境传递数据给组件； 


事件 允许组件触发外部环境的 action； 


slot 允许外部环境插入内容到组件的视图结构内。

这三大知识点在上下两篇文章中都体现出来了，限于篇幅和个人知识的匮乏，我并不能将组件的所有特性都描述出来，这还需要靠各位花一些时间去多多了解官网的API，并付诸实践。
如果要构建一些大型的应用，基于组件的开发模式是一个不错的选择，我们将整个系统拆分成一个一个小组件，就像乐高一样，然后将这些组件拼接起来。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
                    
                  

$parent示例
下面这段代码定义了两个组件：child-component和它的父组件parent-component。在子组件中，通过this.$parent可以访问到父组件的实例。

Messages: {{ messages | json }}

    

<template id="child-component">

    

</div>
<div class="container"&gt;
    <simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"&gt;
    </simple-grid>
</div>