<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <table> <tr> <th colspan="3">父组件数据</td> </tr> <tr> <td>name</td> <td>{{ name }}</td> <td><input type="text" v-model="name" /></td> </tr> <tr> <td>age</td> <td>{{ age }}</td> <td><input type="text" v-model="age" /></td> </tr> </table> <my-component v-bind:my-name.sync="name" v-bind:my-age="age"></my-component> </div> <template> <table> <tr> <th colspan="3">子组件数据</td> </tr> <tr> <td>my name</td> <td>{{ myName }}</td> <td><input type="text" v-model="myName" /></td> </tr> <tr> <td>my age</td> <td>{{ myAge }}</td> <td><input type="text" v-model="myAge" /></td> </tr> </table> </template> <script src="https://www.jb51.net/js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { name: 'k', age: 24 }, components: { 'my-component': { template: '#myComponent', props: ['myName', 'myAge'] } } }) </script> </body> </html>
可以检索：
其中，{{ col | capitalize}}过滤，首字母大写。
<tr v-for="entry in data | filterBy filterKey"> <td v-for="col in columns"> {{entry[col]}} </td> </tr>
过滤搜索关键词；
双循环，tr循环data条数，4行，entry表示每行；td循环columns数量，3列，col表示每列，entry[col]取具体数据。
props: { data: Array, columns: Array, filterKey: String }
验证：父组件传递过来的data和columns必须是Array类型，filterKey必须是字符串类型。
验证要求示例：
Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 多种类型 (1.0.21+) propM: [String, Number], // 必需且是字符串 propB: { type: String, required: true }, // 数字，有默认值 propC: { type: Number, default: 100 }, // 对象/数组的默认值应当由一个函数返回 propD: { type: Object, default: function () { return { msg: 'hello' } } }, // 指定这个 prop 为双向绑定 // 如果绑定类型不对将抛出一条警告 propE: { twoWay: true }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } }, // 转换函数（1.0.12 新增） // 在设置值之前转换值 propG: { coerce: function (val) { return val + '' // 将值转换为字符串 } }, propH: { coerce: function (val) { return JSON.parse(val) // 将 JSON 字符串转换为对象 } } } })
Stringtype 可以是下面原生构造器：
Number
Boolean
Function
Object
Array
type 也可以是一个自定义构造器，使用 instanceof 检测。
当 prop 验证失败时，Vue 将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。