作用域插槽

應用場景:父組件對子組件的內容進行加工處理

 

我們先來看2.6版本之前的寫法：

// 父組件
<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>

再來看2.6版本之后的寫法，子組件的寫法不用變，和原來一模一樣，來看父組件的寫法：

// 父組件
<template>
  <div id="app">
    <child>
      <template v-slot="a">
        <p v-text="a.item"></p>
      </template>
    </child>
  </div>
</template>
<script>
import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}
</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的對象解構