<table> <tr is="my-component"></tr> //这里改成is属性 <tr is="my-component"></tr> <tr is="my-component"></tr> </table> // 定义 var MyComponent = Vue.extend({ template: '<div>A custom component!</div>' //这里不能用tr })
修改后，相当于
<table> <tr><my-component></my-component></tr> <tr><my-component></my-component></tr> <tr><my-component></my-component></tr> </table>
保留了原来的tr，所以dom解析不会出错
4.Props：组件通讯的手段
4.1“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：
Vue.component('child', { // 声明 props，这里驼峰式命名 props: ['myMessage'], //模板中可以这样用 template: '<span>{{ myMessage }}</span>' })
HTML 特性不区分大小写。名字形式为 camelCase 驼峰式的 prop 用作特性时，需要转为 kebab-case（短横线隔开），所以html中是这个样子的：
<!-- kebab-case in HTML --> <child my-message="hello!"></child>
以上这种是props的静态用法，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
这时候看到v-model有点懵逼，这货不是跟{{}}类似，引用data属性中的parentMsg吗？此时肯定是没有定义parentMsg的，所以v-bind：my-message=”parentMsg”绑定组件的同时，赋予了父组件parentMsg属性。
4.2 prop的绑定类型：
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定：
<!-- 默认为单向绑定 --> <child :msg="parentMsg"></child> <!-- 双向绑定 --> <child :msg.sync="parentMsg"></child> <!-- 单次绑定 --> <child :msg.once="parentMsg"></child>
双向绑定会把子组件的 msg 属性同步回父组件的 parentMsg 属性。单次绑定在建立之后不会同步之后的变化。这里原文还特定强调了下， prop 是一个对象或数组时，是按引用传递，修改内容会随时修改父组件内容，这个有语言基础的都知道。
4.3 prop验证：
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象({}而不是[])，包含验证要求：
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 字符串转换为对象 } } } })
type 可以是下面原生构造器：
String
Number
Boolean
Function
Object
Array
type 也可以是一个自定义构造器，使用 instanceof 检测。
当 prop 验证失败了，Vue 将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。
这里也是看的我一脸懵逼，连个栗子都不给，拿刚才的例子改一下打个比方
Vue.component('child', { // 声明 props，这里驼峰式命名 props: ['myMessage'], //模板中可以这样用 template: '<span>{{ myMessage+1}}</span>' //改成表达式 }) <!-- kebab-case in HTML --> <child my-message="hello!"></child> //这里先不改
如果我们希望别人把child组件的myMessage当做Number类型来处理，而我们这里又没有做prop验证，结果就是{{ myMessage+1}}会变成字符串拼接，当html传入的是hello!,渲染出来结果：hello!
所以说，告诉别人这里要传入Number类型是必要的，于是改为：