Vue学习-插槽

<div class="jk-learn-index">
        <!-- 作用域插槽 -->
        <demo-slot>
            <template>
                <span>111111111</span>
            </template>
            <template v-slot:first="{ fData }">
                <span>随机数{{ fData }}</span>
            </template>
            <!-- 已废弃 -->
            <!-- <template slot="second">
            </template> -->
            <!--  Vue 2.6.0 新的 -->
            <template v-slot:second>
                新的语法
            </template>
        </demo-slot>
    </div>

demo1-slot.vue
<template>
    <div class="slot-index">
        <div class="slot-index-item">
            匿名插槽:
            <slot> </slot>
        </div>
        <div class="slot-index-item">
            作用域插槽:
            <slot name="first" :fData="cData">
                ( ⊙ o ⊙ )是的
            </slot>
        </div>
        <div class="slot-index-item">
            具名插槽:
            <slot name="second">
                ( ⊙ o ⊙ )是的
            </slot>
        </div>
    </div>
</template>