[Vue] 插槽 1/2

<slot></slot>

1. 可以在自定義的component中，預留一個空間，給父組件插入內容。
2. 子組件和父組件的作用域各自獨立，不可交互使用。

• 子組件

Vue.component('my-tab', {

    template:`

    <a style="border: 1px solid black;">

        <slot></slot>

    </a>

    `

})

• 父組件

<my-tab>

     slot content

     <br>

    {{currentTab}}

</my-tab>

後備內容

<slot></slot>中可以設定預設內容，在無任何資料時，自動顯示

• 子組件

Vue.component('my-tab', {

    template:`

    <a style="border: 1px solid black;">

        <slot>預設內容</slot>

    </a>

    `

})

• 父組件

<my-tab>

     slot content

     <br>

    {{currentTab}}

</my-tab>

具名插槽

1. slot可以給定名稱(name)，就可以預留多個空間給父組件。
2. 沒有名稱(name)的slot，預設名稱: default。

• 子組件

Vue.component('my-tab', {

    template:`

    <div>

    <a style="border: 1px solid black;">

        <slot>預設內容</slot>

    </a>

    <br>

    <slot name="content"></slot>

    </div>

    `

})

• 父組件

<my-tab>

    slot content

    <br>

    {{currentTab}}

    <template v-slot:content>

        具名slot，給定名稱content，插入指定位置

    </template>

</my-tab>

source code