vue 使用props传递数据

组件不仅仅要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过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的情况：

1. 父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件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是对象和数组时，在自组件内改变是会影响父组件的。