“props”是组件数据的一个字段，期望从父组件传下来数据。因为组件实例的作用域是孤立的，所以子组件需要显式地用props选项来获取父组件的数据。
Props选项可以是字面量、表达式、绑定修饰符。
5.1.1 字面量
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <child msg="hello!"></child> <script src="https://www.jb51.net/js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ msg }}你困吗</span>' }) new Vue({ el: 'body' }) </script> </body> </html>
HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）：
Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }) <!-- kebab-case in HTML --> <child my-message="hello!"></child>
5.1.2 动态
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件。比如酱：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <input v-model="parentMsg"> <br> <child :my-message="parentMsg"></child> </div> <script src="https://www.jb51.net/js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component('child', { props: ['myMessage'], template: '<span>{{ myMessage }}你困吗</span>' }) new Vue({ el: 'body', data:{ parentMsg:'' } }) </script> </body> </html>
当我在input里面输入哈哈的时候：
5.1.3 绑定类型
可以使用绑定修饰符：
.sync，双向绑定
.once，单次绑定
<!-- 默认为单向绑定 --> <child :msg="parentMsg"></child> <!-- 双向绑定 --> <child :msg.sync="parentMsg"></child> <!-- 单次绑定 --> <child :msg.once="parentMsg"></child>
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。
不过需要注意的是：如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。
示例：
<!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>
上面这段设置了名字双向，年龄单向：
以下是一个大神的综合示例：