SOURCE

new Vue({
    components: {
        child: {
            template: `
            <div>
                <slot :slotData="child">default</slot>
                <slot name="other" :other="other">name-slot</slot>
                <div>{{child.data}}</div>
            </div>`,
            data() {
                return {
                    child: {data: 'child'},
                    other: 'other-data'
                }
            }
        }
    },
    data() {
        return {
            a: 'b'
        }
    },
    created() {
        console.log(123)
    },
    methods: {

    }
}).$mount('#app')

<div id="app">
    {{a}}
    <child>
        <!-- 两个默认的相同写法 -->
        <!-- <template slot-scope="slotProps">{{slotProps.slotData}}</template> -->
        <!-- <template v-slot="slotProps">{{slotProps.slotData}}</template> -->
        <template #default="slotProps">{{slotProps.slotData}}</template>
        <!-- 具名插槽 -->
        <!-- <template slot="other">{12313</template> -->
        <!-- <template v-slot:other>{12313</template> -->
        <!-- <template #other>{12313</template> -->
        <!-- 作用域具名插槽  -->
        <!-- <template slot="other" slot-scope="slotProps">{{slotProps}}</template> -->
        <!-- <template v-slot:other="slotProps">{{slotProps}}</template> -->
        <template #other="slotProps">{{slotProps}}</template>


    </child>
</div>