v-slot 簡單用法

只有一個插槽（預設slot）

當只有一個插槽時，就不須命名

// child.vue
<template>
    <slot>子元件預設內容</slot>
</template>

如果父元件沒有放插槽內容，就會顯示子元件中預設的內容。父元件有放插槽內容時，子元件的預設內容就不會顯示。

// parent.vue
<template>
   <Child>
     要放入插槽的內容
   </Child>
</template>

具名插槽

如果子元件要設多個插槽時，就可以對slot命名，讓父元件的內容可以插入對應的地方。

// child.vue
<template>
    <slot name="title">子元件預設標題</slot>
    <slot name="content">子元件預設內容</slot>
</template>

父元件中用template+v-slot來命名對應的位置，v-slot可以縮寫成#

// parent.vue
<template>
   <Child>
       <template v-slot:title>父元件設定標題</template>
        <template #content>父元件設定內容</template>
   </Child>
</template>

tags: Vue