vue的插槽，也就是slot，是元件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父元件來決定。 實際上，一個slot最核心的兩個問題這裡就點出來了，是顯示不顯示和怎樣顯示。

瞭解vue的同學都知道插槽分為單個插槽，具名插槽，還有作用域插槽，前兩種比較簡單這裡就不贅述了，今天的重點是討論作用域插槽。

簡單來說，前兩種插槽的內容和樣式皆由父元件決定，也就是說顯示什麼內容和怎樣顯示都由父元件決定；但是第三種插槽就不同了，作用域插槽的樣式由父元件決定，內容卻由子元件控制。簡單來說：前兩種插槽不能繫結資料，作用域插槽是一個帶繫結資料的插槽。

// 父元件
<template>
  <div id="app">
    <child>
      <template slot-scope="a">
        <p v-text="a.item"></p>
      </template>
    </child>
  </div>
</template>

<script>
import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}
</script>
 

//子元件
<template>
  <div>
    <ul>
      <li v-for="(item,index) in items" :key="index">{{item}}
        <slot :item='item'></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items:['Webkit','Gecko','Trident','Blink']
    }
  }
}
</script>
 

我們可以清晰的看到，在子元件中有個插槽slot通過v-bind綁定了一個值item，在父元件中引用了子元件child，child標籤裡面可以看到作用域插槽template，此時slot-scope就是一個物件，這個物件是由子元件的插槽slot所繫結的值所組成的一個物件，比如在這裡slot-scope = {item}，這裡的item來自子元件，而這裡slot-scope的值是a，所以就有了下面的

<p v-text="a.item"></p>

說到這裡，想必大家都應該明白了作用域插槽了吧，簡單來說就一句話：可以繫結資料的插槽，顯示內容完全由子元件決定，資料來自子元件。

如果繫結資料太多，而你不需要全都用到的時候可以使用es6的物件解構，關於物件解構比較簡單，筆者在此就不再贅述了！