父子组件通信之生命周期传值

一 场景

parent组件和children组件同时需要使用gutter的值，但是如果给所有的parent和children写上gutter属性也太麻烦了，重复太多次了！！！这时候，我们希望只给parent组件传gutter，同时子组件children也能获得这个gutter的值，要怎么做呢？利用生命周期函数

<parent gutter="20">
    <children/>
    <children/>
    <children/>
    <children/>
    <children/>
</parent>

二 created和mounted周期函数

1. created和mounted的区别：created在内存中创建一个组件，但不将它放到页面上。mounted将组件挂载到页面上。
2. vue中父子组件created和mounted的调用顺序：

    先父组件created,
    再子组件created,
    接下来子组件mounted,
    最后父组件mounted。
    这就说明，如果一个组件挂载到页面上，那么他的子孙一定已经挂载到页面上了

3. 因此，利用周期函数，我们可以在parent组件中的mounted生命周期函数中，将gutter的值传给children中的data变量。这样在children里面就可以使用gutter的值啦。

  //parent组件
    <script>
        export default {
            name:'Parent',
            props:{
                gutter:{
                    type:[String,Number]
                }
            },
            mounted(){
                this.$children.forEach((vm)=>{
                    vm.gutter=this.gutter;
                })
            }
        };
    </script>
  //children组件
    <script>
        export default {
            name:'Children',
            data(){
                return{
                    gutter:0
                }
            }
        };
    </script>