<!DOCTYPE html>
<div id="app">
<child-component>
<template slot="girl">漂亮、美丽、购物、逛街</template>
<template slot="boy">帅气、才实</template>
<div>我是一类人，我是默认的插槽</div>
</child-component>
</div>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp ({ })
app.component('child-component', {
data() {
return {}
},
template:`
<div>
<h4>这个世界不仅有男人和女人</h4>
<slot name="girl"></slot>
<div style="height:1px;background-color:red;"></div>
<slot name="boy"></slot>
<div style="height:1px;background-color:red;"></div>
<slot></slot>
</div>
`
})
app.mount('#app')
</script>
这个运行出来是空白，不知道为什么
<!DOCTYPE html>
<div id="app">
<child :lists="nameList">
<template slot-scope="a">
{{a}}
</template>
</child>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp ('child',{
props:['lists'],
data:{
nameList:[
{id:1,name:'孙悟空'},
{id:2,name:'猪八戒'},
{id:3,name:'沙和尚'},
{id:4,name:'唐僧'},
{id:5,name:'小白龙'},
]
},
template:`
<div>
<ul>
<li v-for="list in lists">
<slot :bbbbb="list"></slot>
</li>
</ul>
</div>
`
})
.mount('#app')
</script>
