vue2 做用域插槽slot-scope詳解

插槽分爲單個插槽，具名插槽，還有做用域插槽，前兩種比較簡單這裏就不贅述了，今天的重點是討論做用域插槽。

簡單來講，前兩種插槽的內容和樣式皆由父組件決定，也就是說顯示什麼內容和怎樣顯示都由父組件決定；

做用域插槽的樣式由父組件決定，內容卻由子組件控制。簡單來講：前兩種插槽不能綁定數據，做用域插槽是一個帶綁定數據的插槽。

注意:在 2.5.0+，slot-scope 再也不限制在 <template> 元素上使用，而能夠用在插槽內的任何元素或組件上。

1.App.vue

 1 <template>  2 <div>  3 <child :propName="items"> <!--傳值到子組件-->  4 <!--寫法1 -->  5 <li  6 <!--做用域插槽也能夠具名 綁定slot name="slotName"-->  7  slot="slotName"  8 <!--把子組件插槽看做一個對象, 賦給scopeName-->  9  slot-scope="scopeName"> 10 <!-- dos="item.do" (子組件中)--> 11  {{scopeName.dos}} 12 </li> 13 </child> 14 15 <!--寫法2 es6 的解構寫法 推薦!!!--> 16 <child :propName="items"> 17 <li slot="slotName" slot-scope="{item}"> 18  {{item.do}} 19 </li> 20 </child>

21 </div> 22 </template> 23 <script> 24  import child from "./components/child.vue" 25  export default{ 26  components:{child}, 27  data(){ 28 return{ 29  items:[ 30  {do:'play'}, 31  {do:'eat'}, 32  {do:'sleep'}, 33  {do:'play'}, 34  {do:'eat'}, 35  {do:'sleep'} 36  ] 37  } 38  } 39  } 40 </script>   

 

2.child.vue

 1 <template>  2 <ul>  3 <slot name="slotName" <!--做用域插槽也能夠具名!-->  4  v-for="item in items"  5 :dos="item.do" <!--取循環中的項做爲屬性 方便父組件調用!-->  6 ></slot>  7 </ul>  8 </template>  9 <script> 10  export default{ 11  props:['items'] <!--父級items 傳過來的值!--> 12  } 13 </script>