作用域插槽必須是template開頭結尾
使用 slot-scope="props"來接收數據,這裏的props是自定義的
使用這種方式的時候顯示什麼,怎麼顯示不再是子組件決定了,而是父組件調子組件的時候給子組件傳遞模版
<body>
<div id="app">
<child>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</child>
</div>
<script>
Vue.component('child',{
data: function() {
return {
list: [1,2,3,4]
}
},
template: `<div>
<ul>
<slot
v-for="item of list"
:item=item
></slot>
</ul>
</div>`
})
var app = new Vue({
el:"#app",
})
</script>