vue中v-slot使用

 

1，v-slot的使用步驟

　　

　　

<!-- slot.vue-->

  <!-- 通過name屬性指定具名插槽，沒有name屬性的為默認插槽-->
 <slot name="header">我是header</slot>

 <slot name="main">我是main</slot>

 <slot :title="title" name="footer"></slot>

 <slot></slot>



// index.vue

<!-- 通過v-slot:footer="title"來拿到slot頁面傳過來的數據，v-slot:xxx來指定對應slot.vue中的插槽-->

<slot-name>
            <template v-slot:header>我是新的header</template>
            <template v-slot:main>哈哈哈哈</template>
            <template v-slot:default>我是默認的</template>
            <template v-slot:footer="title">{{ title.title.age }}</template>        
</slot-name>



<!-- v-slot的簡寫形式-->
<!-- 通過#號加上slot.vue中的對應插槽中的name屬性的值-->
<slot-name>
            <template #header>我是新的header</template>
            <template #footer="title">{{ title.title.age }}</template>
</slot-name>