单向数据流中props的两种应用场景

• 单向数据流：通过 props 传递数据是单向的，也就是父组件数据变化时会传递给子组件，但是反过来不行。
• 单向数据流的目的：是尽可能的将父子组件解耦，避子组件无意中修改了父组件的状态。
• 单向数据流的应用场景：业务中会经常遇到两种需要改变 prop 的情况

第一种：

父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 内再声明一个数据，引用父组件的 prop。
步骤一：注册一个组件
步骤二：将父组件的数据传递进来，并在子组件中使用 props 接收
步骤三：将传递进来的数据通过初始值保存起来。

        Vue.component('my-component', {
            props: ['msg'],
            template: '<div>{{count}}</div>',
            data() {
                return {
                    count: this.msg //步骤三：将传递进来的数据通过初始值保存起来。
                }
            }
        })

第二种：

prop 作为需要被转变的原始值传入，这种情况使用计算属性就可以了
步骤一：注册组件
步骤二：将父组件的数据传递进来，并在子组件中用 props 接收
步骤三：将传递进来的数据通过计算属性进行重新计算

//在input中输入数字，改变div的高度为相应的大小
        <input type="text" v-model="height">
        <width-component :height="height"></width-component>


        Vue.component('width-component', {
            props: ['height'],
            template: '<div :style="style"></div>',
            data() {
                return {
                }
            },
            computed: { 
                style() {
                    return {
                        height: this.height + 'px',
                        background: 'red',
                        width: '30px'
                    }
                }
            }
        })