Vue2.x-插槽slot用法

指令：

　　v-shot

說明：

　　插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽

使用示例

子組件：
<template>
    <div>
        <button>
            <slot>子組件自定義按鈕</slot>
        </button>
    </div>
</template>

父組件引入使用：
<template>
    <div>
        <TButton></TButton>
    </div>
</template>

這時頁面顯示：

　　

 

 

 當父組件未傳任何內容時，則默認編譯子組件中的內容。

 如果在父組件使用時自定義內容，則展示父組件定義的內容：

<template>
    <div>
        <TButton>父組件定義按鈕</TButton>
    </div>
</template>

頁面展示：

　　

具名插槽

　　在slot標簽上增加name屬性，使用時，則需指定name，否則不生效，示例：

子組件：
<template>
    <div>
        <button>
            <slot name="text">子組件自定義按鈕</slot>
        </button>
    </div>
</template>

父組件引入使用：
    <template>
    <div>
        <TButton>
            <template v-slot:text>
                父組件定義按鈕
            </template>
        </TButton>
    </div>
</template>

注意：v-slot只能寫在template標簽上面

具名插槽縮寫

　　將v-slot替換成#,示例：

<template>
    <div>
        <TButton>
            <template #text>
                父組件定義按鈕
            </template>
        </TButton>
    </div>
</template>

　　如果沒有名稱，簡寫時也要帶上default，示例：

子組件：
    <template>
    <div>
        <button>
            <slot>子組件自定義按鈕</slot>
        </button>
    </div>
</template>

父組件引入使用：
    <template>
    <div>
        <TButton>
            <template #default>
                父組件定義按鈕
            </template>
        </TButton>
    </div>
</template>

作用域插槽：

　　作用域插槽就是父組件插槽獲取子組件中的數據，示例：

子組件定義：
<template>
    <div>
        <button>
            <slot key1="value1" key2="value2">子組件自定義按鈕</slot>
        </button>
    </div>
</template>

父組件獲取子組件的數據：
<template>
    <div>
        <TButton>
            <template #default="childValue">
                父組件定義按鈕
                <br />
                {{ childValue }}
            </template>
        </TButton>
    </div>
</template>
    

　　頁面展示：

　　

 

 

 　　其中childValue是自定義的名稱，childValue作為子組件所有數據的key，使用數據則以childValue.key1形式

　　對應老版本使用則是slot-scope="childValue"

 

具名插槽+作用域插槽不簡寫使用示例：

子組件：
    <template>
    <div>
        <button>
            <slot name="text" key1="value1" key2="value2">子組件自定義按鈕</slot>
        </button>
    </div>
</template>

父組件：
    <template>
    <div>
        <TButton>
            <template v-slot:text="childValue">
                父組件定義按鈕
                <br />
                {{ childValue }}
            </template>
        </TButton>
    </div>
</template>

使用多個插槽示例：

子組件：
<template>
    <div>
        <div>
            <slot name="header" text="我是header">header</slot>
            <slot name="main" text="我是main">main</slot>
            <slot name="footer" text="我是footer">footer</slot>
        </div>
    </div>
</template>

父組件：
    <template>
    <div>
        <TMain>
            <template #header="headerValue">
                <div class="header">
                    {{ headerValue.text }}
                </div>
            </template>
            <template #main="mainValue">
                <div class="main">
                    {{ mainValue.text }}
                </div>
            </template>
            <template #footer="footerValue">
                <div class="footer">
                    {{ footerValue.text }}
                </div>
            </template>
        </TMain>
    </div>
</template>

注意：

　　:后面是插槽的名稱

　　=后面是父組件獲取子組件的數據  

　　#是v-slot的縮寫  #default    #text  ===  v-slot:text     對應老版本寫法： slot="text"

　　v-slot和#只能寫在template標簽上面