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>

页面效果

原文地址：https://www.cnblogs.com/Dingzy/p/12170650.html