<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', {










