看了官网的Vue作用域插槽示例，不是特别明白，又在网上搜索了下其他的示例参考了下，然后大概清楚了点，就写了个小示例：
<!DOCTYPE html>
<
html>
<
head>
<
title
>Vue 作用域插槽 列表组件 示例
</
title
>
<
script
src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></
script>
</
head>
<
body>
<
div
id=
"app"
>
<
child :
favorite=
"items"
>
<
li
slot=
"item"
slot-scope=
"item"
>{{item.text}}-{{item.message}}
</
li
>
</
child
>
</
div
>
<
script
>
Vue
.
component
(
'child'
,{
props:[
'favorite'
],
template:
`
<ul>
<slot name="item" v-for="cute in favorite" :text="cute.text" :message="cute.msg"></slot>
</ul>
`
})
var
app
=
new
Vue
({
el:
'#app'
,
data:{
items:[
{text:
'ss'
,msg:
'睡睡'
},
{text:
'ww'
,msg:
'玩玩'
},
{text:
'cici'
,msg:
'吃吃'
}
]
}
})
<
/
script
>
</
body>
</
html>
4137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
