vue插槽嵌套

插槽嵌套的關鍵是父組件插槽的slot=子組件插槽的名稱

子組件 slotTest1.vue

<template>
    <div>        
        <slot name='slot1'></slot>
    </div>
</template>

 

slotTest2.vue

<template>
    <slot-test1>
        <slot name='slot2' slot='slot1' record='我是插槽2'>
        </slot>    
    </slot-test1>
</template>
<script>
import slotTest1 from "./slotTest1"
export default {
  components: {
    slotTest1
  },
  data() {
    return {     
    }
  }
}
</script>

父頁面 test.vue

<template>
    <slot-test2>
        <div slot='slot2' :slot-scope='record'>
            <p>{{record}}</p>
            <p>是真的嗎？</p>
        </div>
    </slot-test2>
</template>
<script>
import slotTest2 from './slotTest2'
export default {
    components:{slotTest2},
    data(){
        return{
            record:'年齡100歲'
            
        }
    }
}
</script>

 

頁面效果