作用域插槽
<div id="root">
<child></child>
</div>
Vue.component('child', {
data(){
return {
list:[1,2,3,4]
}
},
template: `<div>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>`,
})
let vm = new Vue({
el: '#root'
})上面代碼，如果此時有個需：child組件在很多地方會被調用，我希望在不同的地方調用child的組件時，這個列表到底怎麼循環，列表的樣式不是child組件控制的，而是外部child模版站位符告訴我們組件的每一項該如何渲染，也就是說這裏不用li標籤，而是要用slot標籤。
<div id="root">
<child>
<template slot-scope="props"> //固定寫法，屬性值可以自定義
<li>{{props.item}}</li> //用插值表達式就可以直接使用
</template>
</child>
</div>
Vue.component('child', {
data(){
return {
list:[1,2,3,4]
}
},
template: `<div>
<ul>
<slot v-for="item of list" :item=item></slot>
</ul>
</div>`,
})
let vm = new Vue({
el: '#root'
})<slot v-for="item of list" :item=item></slot>這段代碼的意思是child組件去做一個列表的循環，但是列表項中的每一項怎麼顯示，我並不關心，具體怎麼顯示，外部你來告訴我.
<template slot-scope="props"></template>這是一個固定寫法，屬性值可以自定義。它的意思是當子組件用slot時，會往子組件裏傳遞一個item，從子組件接收的數據都放在了props上。
什麼時候使用作用域插槽呢?當子組件循環或某一部分的dom結構應該由外部傳遞進來的時候，我們要用作用域插槽，使用作用域插槽，子組件可以向父組件的作用域插槽裏傳遞數據，父組件如果想接收這個數據，必須在外層使用template模版佔位符，同時通過slot-scope對應的屬性名字，來接收你傳遞過來的數據，上面代碼，傳遞一個一個item過來，在父組件的作用域插槽裏面，就可以接收到這個item，就可以使用它了。