组件不仅仅要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。
在组件中，使用选项props来申明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。
props的值是数组的情况：
构造一个数组，接收一个来自父级的数据message，并把它在组件模板中渲染。
<div id="app">
<my-component message="来自父组件的数据"></my-component>
</div>
<script>
Vue.component('my-component', {
props: ['message'],
template: '<div>{{ message }}</div>'
});
// 挂载
var app = new Vue({
el: '#app'
})
</script>
props中声明的数据与组件data函数return的数据主要区别就是props的来自父级，而data中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。上例的数据message就是通过props从父级传递过来的，在组件的自定义标签上直接写该props的名称，如果要传递多个数据，在props数组中添加项即可。
由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名的props名称要转为短横分隔命名，例如：
<div id="app">
<my-component warning-text="提示信息"></my-component>
</div>
<script>
Vue.component('my-component', {
props: ['warningText'],
template: '<div>{{ warningText }}</div>'
});
// 挂载
var app = new Vue({
el: '#app'
})
</script>
使用props绑定来自父级的动态数据：
使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件。
<div id="app">
<input type="text" v-model="parentMessage">
<my-component :message="parentMessage"></my-component>
</div>
<script>
Vue.component('my-component', {
props: ['message'],
template: '<div>{{ message }}</div>'
});
// 挂载
var app = new Vue({
el: '#app',
data: {
parentMessage: ''
}
})
</script>
业务中会经常遇到两种需要改变prop的情况：
- 父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据，引用父组件的prop，示例：
<div id="app">
<my-component :init-count="1"></my-component>
</div>
<script>
Vue.component('my-component', {
props: ['initCount'],
template: '<div>{{ count }}</div>',
data: function() {
return {
count: this.initCount
}
}
});
// 挂载
var app = new Vue({
el: '#app',
})
</script>
组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount。
2.prop作为需要被转变的原始值传入。这种情况用计算属性就可以了。示例：
<div id="app">
<my-component :width="100"></my-component>
</div>
<script>
Vue.component('my-component', {
props: ['width'],
template: '<div :style="style">组件内容</div>',
computed: {
style: function() {
return {
width: this.width + 'px'
}
}
}
});
// 挂载
var app = new Vue({
el: '#app',
})
</script>
因为用CSS传递宽度要带单位（px），但是每次都写太麻烦，而且数值计算一般是不带单位的，所以统一在组件内使用计算属性就可以了。
注意，在JavaScript中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在自组件内改变是会影响父组件的。
