[Vue] 插槽 2/2

作用域插槽

1. 父組件可以使用子組件的data
2. 被綁定在slot上的prop稱為: 插槽 prop

• 父組件

<my-tab>

</my-tab>

• 子組件

Vue.component('my-tab', {

    data: function () {

        return {

            tabName: 'Default Tab Name'

        }

    },

    template: `

    <div>

    <br>

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

        <slot v-bind:tabName="tabName">預設內容</slot>

    </a>

    <br>

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

    </div>

    `

})

自定義插槽prop名稱

1. 在子組件上, 用v-slot可自定義插槽prop的名稱
2. 簡寫: <my-tab v-slot="myChildVariable">...</my-tab>
3. 簡寫和作用愈插槽寫法不可混用

• 父組件

        <my-tab>

            <template v-slot:default="childProp">

                {{childProp.tabName}}

            </template>

        </my-tab>

• 子組件

Vue.component('my-tab', {

    data: function () {

        return {

            tabName: 'Default Tab Name'

        }

    },

    template: `

    <div>

    <br>

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

        <slot v-bind:tabName="tabName">預設內容</slot>

    </a>

    <br>

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

    </div>

    `

})

解構插槽prop

1. 插槽原理: 將插槽內容包括在一個傳入單個參數的函數裡，如下

function (props) {

  // 插槽內容

}

所以可以套入"解構"的概念，控制子組件的屬性

<my-tab>

    <template v-slot="{tab}">

        {{tab.tabName2}}

    </template>

</my-tab>

2. 解構之餘，同時也可重新命名屬性

<my-tab>

    <template v-slot="{tab: myTabCollection}">

        {{myTabCollection.tabName2}}

    </template>

</my-tab>

*.v-slot的縮寫符號: #

source code