屏幕快照 2020-06-05 17.15.42.png

如上圖，報錯提示hw2cO為undefined！而看vue教程中作用域插槽就是這么用的，很疑惑！
上代碼：
子組件：

<template>
    <div class="zs">
        我是HelloWorld2的孩子,這是祖先給我的{{toZS}}
        <slot></slot>
        <slot name="slot1"></slot>
        <slot name="slot2"></slot>
        <slot :hw2c="hw2c" :hw2cO="hw2cO"></slot>
    </div>
</template>

<script>
    export default {
        inject: ['toZS'],
        data() {
            return {
                hw2c: 'hw2c',
                hw2cO: {
                    a: 'I am a',
                    b: 'I am b'
                }
            };
        }
    };
</script>

<style>
    .zs{
        background-color: aqua;
    }
</style>

父組件：

<template>
    <div>
        <p class="hw2-p" @click="$parent.$emit('foo', hw2)">我是HelloWorld2</p>
        <p class="hw2-p" @click="$bus.$emit('sjzx', 1122)">我是HelloWorld2...</p>
        <HelloWorld2C>
            我的匿名插槽
            <template name="slot1">
                我是具名插槽1
            </template>
            <template name="slot2">
                我是具名插槽2
            </template>
            <template v-slot="{hw2c, hw2cO}">
                作用域插槽： 
                {{hw2c}} 
                {{hw2cO.a}}
            </template>
        </HelloWorld2C>
    </div>
</template>

<script>
    import HelloWorld2C from './HelloWorld2C.vue';
    
    export default {
        name: 'HelloWorld2',
        components: {
            HelloWorld2C
        },
        data() {
            return {
                hw2: 'hw2'
            };
        }
    };
</script>

<style>
    .hw2-p {
        background-color: blue;
        color: red;
        width: 200px;
        height: 60px;
        display: inline-block;
        padding-top: 5%;
    }
</style>

將父組件中{{hw2cO.a}}改成{{hw2cO && hw2cO.a}}就不會報錯！但是為什么呢？
于是在父組件中寫出生命周期函數(shù)如下：

beforeCreate() {
            console.log('----beforeCreate----');
            console.log(this.$children && this.$children.length && this.$children[0] && this.$children[0].hw2cO);
        },
        created() {
            console.log('----created----');
            console.log(this.$children && this.$children.length && this.$children[0] && this.$children[0].hw2cO);
        },
        beforeMount() {
            console.log('----beforeMount----');
            console.log(this.$children && this.$children.length && this.$children[0] && this.$children[0].hw2cO);
        },
        mounted() {
            console.log('----mounted----');
            console.log(this.$children && this.$children.length && this.$children[0] && this.$children[0].hw2cO);
        }

發(fā)現(xiàn)mounted之前都是獲取不到hw2cO的，而報錯也是出現(xiàn)在mounted之前。這樣就能解釋為什么會報錯。
我的理解是：父組件mounted之前就執(zhí)行到了插槽部分的template里面，只是子組件還沒掛載上去，所以拿不到子組件的數(shù)據(jù)。而真正渲染要等到子組件掛載上去才會執(zhí)行，所以改成hw2cO && hw2cO.a不會報錯。那么用到作用域插槽的同學(xué)就要注意了，有以上用法的需要在前面加個判斷兼容一下~
不知道我的理解是否正確，需要更熟悉的同學(xué)幫忙解答下！謝謝~