父组件不传模板
<template v-slot="{girlfriends}"></template>
父组件规定模板 覆盖掉slot原有的
<template v-slot="{girlfriends}">
<ul>
<li style="color: orangered;">{{girlfriends.id}} {{girlfriends.name}}</li>
</ul>
</template>
父组件也可以规定 呈现的内容
<template v-slot="{girlfriends}">
<ul>
<!-- <li style="color: orangered;">{{girlfriends.id}} {{girlfriends.name}}</li> -->
<li style="color: orangered;">女朋友: {{girlfriends.name}}</li>
</ul>
</template>
详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child :girl-names="girlfriends">
<!-- <template v-slot:default="slotProps"> -->
<template v-slot="{girlfriends}">
<!-- <ul>
<li style="color: orangered;">{{girlfriends.id}} {{girlfriends.name}}</li>
</ul> -->
</template>
</child>
</div>
<script>
Vue.component('child', {
props: {
girlNames: {
type: Array
}
},
//:item=item 子组件向父组件传递内容
// 插槽 prop
// user 作为 <slot> 元素的一个 attribute 绑定上去： :user="user" 前面的:user 就是父组件可以用到的slotProps.user
template: `<div>
<slot v-for="item of girlNames" v-bind:girlfriends = "item" >
<h3> {{item.name }}</h3>
</slot>
</div>`
})
var vm = new Vue({
el: "#app",
data: function () {
return {
girlfriends: [{
id: 0,
name: '小花'
},
{
id: 1,
name: '小李'
},
{
id: 2,
name: '小红'
},
{
id: 3,
name: '小露'
},
{
id: 4,
name: '阿莲'
},
{
id: 5,
name: '阿娇'
},
]
}
},
})
</script>
</body>
</html>
