Vue之数据传递

简单的props更新

父组件

<template>

    <div>

        <block-a :out-data="x"></block-a>

    </div>

</template>

<script>

    import blockA from './block-a';

    export default {

        name: "App",

        components:{

            blockA

        },

        data(){

            return {

                x:123

            }

        },

        mounted(){

            setTimeout(()=>{

                this.x = 789;

            },1000)

        }

    }

</script>

子组件

<template>

    <div>

        这是子组件

        {{outData}}

    </div>

</template>

<script>

    export default {

        name: "block-a",

        props:['outData'],

        watch:{

            outData(newVal){

                console.log("新的值是：" + newVal)

            }

        }

    }

</script>

运行效果，界面先展示123，一秒后展示789，控制台仅输出了“新的值：789”。

结论：简单的数值类型能通过props动态反映到子组件内，而且能被子组件watch检测。

props对象的更新

父组件

<template>

    <div>

        <block-a :out-data="x"></block-a>

    </div>

</template>

<script>

    import blockA from './block-a';

    export default {

        name: "App",

        components:{

            blockA

        },

        data(){

            return {

                x:{

                    a:123,

                    b:999

                }

            }

        },

        mounted(){

            setTimeout(()=>{

                this.x.a = 789;

            },1000)

        }

    }

</script>

子组件

<template>

    <div>

        这是子组件

        {{outData}}

    </div>

</template>

<script>

    export default {

        name: "block-a",

        props:['outData'],

        watch:{

            outData(newVal){

                console.log("新的值是：" + newVal)

            }

        }

    }

</script>

这个例子对比上一个例子，将传递的数据改为了对象类型。对对象属性的变更，能动态反映到子组件中（子组件的界面一秒后发生正确的变化），但watch函数却没有执行（控制台无输出）。

为了监听对象属性的变化，将子组件中的watch设置修改如下：

        watch:{

            outData:{

                handler(newVal){

                    console.log("新的值是：" + newVal)

                },

                deep:true

            }

        }

这样代码运行起来，不仅界面会发生变化，而且控制台也会有输出了（属性变化能被子组件watch检测到了），虽然检测出来有属性变更，却没办法知道到底是哪个属性发生了变更。

补充测试1：修改原有属性，同时添加新的属性（this.x.c=123），则子组件中检测出对象原有属性发生变更后，读取到的对象中也包含了新的属性（c=123）。

补充测试2：父组件中直接为属性赋值一个新的对象，如

setTimeout(()=>{

    this.x = {

        kkk:123

    };

},1000)

则，不管子组件中采用深层watch还是普通的watch检测，都检测出变更（控制台有输出），而且界面也会发生正确变化。

补充测试3：将父组件中的响应式对象删除

<template>

    <div>

        <block-a :out-data="x"></block-a>

    </div>

</template>

<script>

    import blockA from './block-a';

    export default {

        name: "App",

        components:{

            blockA

        },

        data(){

            return {

            }

        },

        mounted(){

            setTimeout(()=>{

                this.x = {

                    kkk:123

                };

            },1000)

        }

    }

</script>

则代码运行会报错，提示渲染期间使用了x，而x未定义。而且后续子组件中没有发生任何变化，控制台也无输出。

结论：当父组件中的响应式对象通过props与子组件中的属性建立了关联后，父组件中的响应式对象发生变更（原属性发生变化和对象被重新赋值，前提是对应的setter存在，这样的赋值才是响应式的），都会通知到被关联子组件去重新渲染（与这个对象相关的属性部分dom渲染），而且watch函数会进入判断（如果是深层watch，则对比对象的属性，如果是普通watch，则简单对应对象的引用），如果没有判断出来发生变化，则不执行watch回调函数。

props对象属性的更新

以上发现一个问题，子组件能监听出对象属性发生了变化，却不知道变化了哪个属性。解决办法是使用简单watch，但是写法得改变一下，要直接定位到我关心的属性上，将子组件的watch修改如下

watch:{

    ['outData.a'](newVal){

        console.log("新的值是：" + newVal)

    }

}

对于父组件中的x被重新赋值：新对象不存在a属性或者a属性的值与原来的值不一致时，子组件中的watch才会执行，如果重新赋值后，新对象的a属性与原对象的a属性值相同，则watch回调不执行。

结论：在上一条结论的基础上，多加一点，这个例子中的这种watch写法，仅仅是简单地再次读取对象的某个属性值（a），与原来记录的值进行对比，如果不一致，则执行watch回调。而不在乎外部的对象是否被重新赋值了，还是属性被修改了。

修改props

父组件

<template>

    <div>

        <block-a :out-data="x"></block-a>

    </div>

</template>

<script>

    import blockA from './block-a';

    export default {

        name: "App",

        components:{

            blockA

        },

        data(){

            return {

                x:{

                    a:123,

                    b:999

                }

            }

        },

        mounted(){

            setTimeout(()=>{

                console.log("父组件中输出")

                console.log(this.x)

            },2000)

        }

    }

</script>

子组件

<template>

    <div>

        这是子组件

        {{outData}}

    </div>

</template>

<script>

    export default {

        name: "block-a",

        props:['outData'],

        watch:{

            ['outData.a'](newVal){

                console.log("新的值是：" + newVal)

            }

        },

        mounted(){

            this.outData.a = 888;

            setTimeout(()=>{

                console.log("子组件中输出")

                console.log(this.outData)

            },1000)

        }

    }

</script>

运行效果：子组件内的watch回调执行，然后子组件内输出了修改后的对象，接着父组件也输出了修改后的对象（a=888）。

虽然props传递（文档中解释props是单向传递的），但因为传递的是对象，所以子组件内对对象的修改等同于父组件中对对象的修改。子组件内通过props获取到的对象和父组件中的对象是一样的，打印出来，发现对象属性上都有getter和setter。

将对象类型改为普通类型，然后在子组件中对props进行修改，会有如下警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "outData"

虽然有这样的警告，却不会影响代码的执行（与出异常不一样，修改语句后面的代码依然会继续执行），子组件内props的变化依然是响应式的（界面显示也会跟着变化），但这样的修改却不会反映到父组件中，父组件中的输出依然是旧的值。

props的转换

上一个例子提示：不能直接修改props值，而应该使用基于props的data或computed属性。这里来演示一下。

父组件

<template>

    <div>

        <block-a :out-data="x"></block-a>

    </div>

</template>

<script>

    import blockA from './block-a';

    export default {

        name: "App",

        components:{

            blockA

        },

        data(){

            return {

                x:{

                    a:123,

                    b:999

                }

            }

        },

        mounted(){

            setTimeout(()=>{

                console.log("父组件中输出")

                console.log(this.x)

            },2000)

        }

    }

</script>

子组件中将props赋值给data属性

<template>

    <div>

        这是子组件

        {{outData}}

    </div>

</template>

<script>

    export default {

        name: "block-a",

        props:['outData'],

        watch:{

            ['outData.a'](newVal){

                console.log("新的值是：" + newVal)

            }

        },

        data(){

            return {

                localData:this.outData,

            }

        },

        mounted(){

            this.localData.a = 888;

            setTimeout(()=>{

                console.log("子组件中输出")

                console.log(this.localData)

            },1000)

        }

    }

</script>

代码运行的效果：与直接修改props对象效果一致，因为虽然修改的是本地的data属性对象，而它指向的是与props一样的对象，所以执行起来，子组件的watch函数会输出，而且子组件和父组件中的定时器输出是相同的对象。

父组件将传递的值从对象类型修改为基本类型，将子组件代码修改如下

<template>

    <div>

        这是子组件

        {{localData}}

    </div>

</template>

<script>

    export default {

        name: "block-a",

        props:['outData'],

        watch:{

            ['outData.a'](newVal){

                console.log("新的值是：" + newVal)

            }

        },

        data(){

            return {

                localData:this.outData,

            }

        },

        mounted(){

            this.localData = 888;

            setTimeout(()=>{

                console.log("子组件中输出")

                console.log(this.localData)

            },1000)

        }

    }

</script>

将基本类型从props属性转为data属性后，修改data属性，而不修改props属性，就不会提示之前的警告了，而且也不会影响父组件中的值。

但是这样修改之后，当父组件修改了传入的数据，因为子组件中直接读取的是data属性，而不是props属性，所以子组件没办法感知props的变更，解决办法是：在子组件中添加一个对props的watch，回调函数中更新data的值。接下来演示一下父子组件交替修改值的示例。

父组件

<template>

    <div>

        <block-a :out-data="x"></block-a>

    </div>

</template>

<script>

    import blockA from './block-a';

    export default {

        name: "App",

        components:{

            blockA

        },

        data(){

            return {

                x:"123"

            }

        },

        mounted(){

            let i = 0;

            setInterval(()=>{

                this.x = "父组件中设置新值：" + i++;

            },5000,100)

        }

    }

</script>

子组件

<template>

    <div>

        这是子组件

        {{localData}}

    </div>

</template>

<script>

    export default {

        name: "block-a",

        props:['outData'],

        watch:{

            ['outData'](newVal){

                this.localData = newVal;

            }

        },

        data(){

            return {

                localData:this.outData,

            }

        },

        mounted(){

            let i = 0;

            setInterval(()=>{

                this.localData = "子组件中设置新值：" + i++;

            },1000)

        }

    }

</script>

运行效果：子组件既能接收到父组件中的值，也能使用自己本地的值。

可以发现，才用这种“监听props + props转data”的办法，组件内的data数据来源就有两种了：来源于当前组件 + 来源于父组件。这种特点可以实现一个带缓存的分页组件，简单描述如下：

组件内维护一个data属性dataList，用于存储要展示的数据，当有组件内有数据缓存时，则将缓存赋值给dataList，来展示缓存的数据，当没有缓存时，则读取外部的props传入的值来显示，通过将这个新的数据缓存起来【这一步读取props的值时需要注意props变化的异步性】。

ps：实现props到data的双向绑定，可以查看这个代码 https://github.com/xxcanghai/cnblogsFiles/blob/master/vue-mixins/propsync.js

props变化的异步性

父组件中修改数据后，子组件中立马读取到的props值，并不是父组件中修改后的值。演示如下：

父组件

<template>

    <div>

        <block-a ref="subBlock" :out-data="x"></block-a>

    </div>

</template>

<script>

    import blockA from './block-a';

    export default {

        name: "App",

        components:{

            blockA

        },

        data(){

            return {

                x:"123"

            }

        },

        mounted(){

            this.x = 888;

            this.$refs.subBlock.getProps(); // 123

        }

    }

</script>

子组件

<template>

    <div>

        这是子组件

        {{outData}}

    </div>

</template>

<script>

    export default {

        name: "block-a",

        props: ['outData'],

        methods: {

            getProps() {

                console.log("获取到的props是：" + this.outData)

            }

        }

    }

</script>

运行效果：控制台输出123，而界面显示888 。这是因为JS是单线程的，父组件中修改完后，马上调用子组件的方法读取props值，这时响应式的代码还没执行，而应该将读取响应式的变化放到下一次vue循环中读取即可，子组件代码修改如下

getProps() {

    this.$nextTick(()=>{

        console.log("获取到的props是：" + this.outData)

    })

}

这样控制台也输出888了。

数组对象的props更新

还没测试，但应该与对象的情况一致，只不过数组与对象的响应式变化有些区别而已【注意有些情况下数组没办法去检测变化】