在Vue中，插槽slot是可以由組件使用者來自定義內(nèi)容，用來做組件的擴(kuò)展。

如下，我們封裝了一個(gè)列表組件
<template>
      ul
          li(v-for="item in list")
                span(v-html="item.text")
</template>
<script>
  export default{
      props:["list"]
  }
</script>

默認(rèn)該組件可以讓使用者傳入list，遍歷顯示list中每個(gè)item的text值
但是，當(dāng)使用者，不僅僅用來顯示text值時(shí)，組件就要求做調(diào)整
如果不同使用者想要呈現(xiàn)的方式各異，我們沒理由為這不同的呈現(xiàn)做特殊定制
這時(shí)候插槽就派上用場(chǎng)，將組件改造如下
<template>
      ul
          li(v-for="item in list")
              slot(:item="item")  
                  span(v-html="item.text")
</template>
<script>
  export default{
      props:["list"]
  }
</script>

使用者就可以自定義插槽內(nèi)容，如list就是我們封裝好的組件
可以顯示內(nèi)容項(xiàng)的名字
<list><tempalte scope="props"><span v-html="props.item.name"></span></template></list>
可以顯示內(nèi)容項(xiàng)的圖片和描述
<list>
<tempalte scope="props">
<div>
    <img :src="props.item.img"/>
    <span v-html="item.desc"></span>
</div>
</template>
</list>

要注意的是，插槽也會(huì)帶來一定的問題：Vue內(nèi)部檢測(cè)刷新的機(jī)制中，如果組件A中包含了插槽元素，子節(jié)點(diǎn)之類的，父組件更新的時(shí)候，該組件A會(huì)被強(qiáng)制更新。
如果組件A中render渲染比較耗時(shí)的話，要做多一層封裝；

如下（其中test是我們上面封裝好的組件）

<div id="app">
          <input type="text" v-model="name"/>
           <test :list="list" @hook:updated="testUpdated"><template scope="props"><span v-html="props.item.name"></span></template></test>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
              list:[{name:"123"},{name:"456"},{name:"789"}],
              name:"test"
        },
        methods:{
              testUpdated:function(){
                       console.log("d")
              }
        }
    })
</script>

在這里，每次修改input框值，都會(huì)觸發(fā)組件test的更新