slot內容分發

slot 內容分發：爲了讓組件能夠組合，咱們須要一種方式來混合父組件的內容與子組件本身的模板。

好比咱們遇到組件須要相互嵌套這樣的狀況：
App.vue 文件

<template> <div class="app"> <Hello> <World></World> <Vue></Vue> </Hello> </div> </template> 

Hello.vue 文件

<template> <div class="hello"> <h3>我是 hello 組件</h3> </div> </template> 

那這麼直接寫是確定只顯示 <Hello> 組件的內容

 

 

 

因此就須要用到 slot 插口，不然該組件標籤中的內容將會被丟棄

1、 單個插槽

只須要在 Hello.vue 文件內寫入 <solt></slot> 標籤

<template> <div class="hello"> <h3>我是 hello 組件</h3> <slot>此處可自定義內容，若是該組件的標籤內沒有內容，則顯示此內容</slot> </div> </template> 

 

 

注意：<solt></slot> 標籤內是能夠自定義內容的，若是在調用的 <Hello></Hello> 標籤內沒有寫入任何內容，則顯示 <solt></slot> 標籤內的自定義內容，不然顯示在調用的 <Hello></Hello> 標籤內寫入的內容

2、多個插槽

假如咱們想要改變 <Hello></Hello> 組件內 <World></World> 和 <Vue></Vue> 的顯示位置，就能夠用到一個特殊的特性 name 來進一步配置如何分發內容，多個插槽能夠有不一樣的名字。具名插槽將匹配內容片斷中有對應 slot 特性的元素。仍然能夠有一個匿名插槽，它是默認插槽，做爲找不到匹配的內容片斷的備用插槽。若是沒有默認插槽，這些找不到匹配的內容片斷將被拋棄。

App.vue 文件

<template> <div class="app"> <Hello> <World slot="world"></World> <h5>我是備用插槽內部顯示的內容</h5> <Vue slot="vue"></Vue> </Hello> </div> </template> 

Hello.vue 文件

<template> <div class="hello"> <slot name="vue"></slot> <h3>我是 hello 組件</h3> <slot name="world"></slot> <slot></slot> </div> </template> 

最後渲染顯示爲

 

 

3、做用域插槽

1. 做用域插槽是一種特殊類型的插槽，用做一個 (能被傳遞數據的) 可重用模板，來代替已經渲染好的元素。

在子組件中，slot 插槽還能夠用做傳遞數據，相似於用 prop 來傳遞數據

在子組件 Hello.vue 中，只須要將須要傳遞的內容寫入插槽中

<template> <div class="hello"> <h3>我是 hello 組件</h3> <!-- text 和 text1 是自定義的，能夠隨便寫 --> <slot text="我是hello" text1="組件的數據"></slot> </div> </template> 

<slot text="我是hello" text1="組件的數據"></slot> 至關於被渲染爲

{
    text:'我是hello', text1:'組件的數據' } 

在 App.vue 中調用 Hello 組件時，經過在 template 中寫入 slot-scope 特殊屬性來獲取數據

<template> <div class="app"> <Hello> <!-- template 是該做用域插槽的模版， slot-scope是一個特殊屬性，用來接收 hello 組件中插槽傳過來的值 --> <template slot-scope="hello"> <!-- 經過訪問一個 json 的方式訪問 hello 中 slot 傳過來的值 --> <span>{{hello.text}} + {{hello.text1}}</span> </template> </Hello> </div> </template> 

注意：在 vue 2.5.0以上版本，就不須要用到 template 模板了，slot-scope 能夠做用在任意元素中

被渲染的結果爲：

 

 

 

 

2. 更典型的用例是在列表組件中，容許使用者自定義如何渲染列表的每一項

在 App.vue 組件內

<template> <div class="app"> <!-- 在子組件綁定 items 把父組件的數據傳給子組件 --> <Hello :items="items"> <li slot="item" slot-scope="bbb"> {{ bbb.text }} </li> </Hello> </div> </template> <script> // 引入 Hello 組件 import Hello from './assets/components/Hello.vue' export default { data(){ return { items:[ {text:'aaaaaa'}, {text:'bbbbb'} ] } }, // 註冊 Hello 組件 components:{ Hello } } </script> 

在 Hello.vue 組件中

<template> <div class="hello"> <ul> <!-- 此處的 items 爲父組件傳過來的數據 --> <!-- text 爲 item 內的對應數據，由於 items 是一個對象，因此要用到綁定，不然頁面上直接渲染出來的內容爲 item.text --> <slot name="item" v-for="item in items" text="item.text"></slot> </ul> </div> </template> <script> export default { // 接收父組件傳過來的 items 數據 props: ['items'], } </script> 

渲染結果爲：