当slot是否有name属性的结果显示问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作用域插槽</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<demo3 v-slot="slotProp">
<div>{{slotProp.item}}</div>
</demo3>
</div> `
});
app.component('demo3',{
data(){
return{
list: [1, 2, 3],
list2: [4, 5, 6]
}
},
template: `
<div>
<slot name="slotProp" v-for="item in list" :item="item">{{item}}</slot>
<slot name="slotProp" v-for="item in list2" :item="item">{{item}}</slot>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>问题描述：
当给slot name属性时，显示结果123456会在一排显示，每个都失去了div包裹，这是为什么，v-slot=""和v-slot:是有什么区别吗
当我给
14
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕星星
2021-11-12 13:11:53
同学你好，解答如下：
1、slot加了name是具名插槽，例如官网中的例子
组件传递的内容会替换掉slot占据的位置，最终渲染的是
2、v-slot:aaa，这样是写插槽的名字，只能用在template标签上，与slot中name属性值对应。但是有一种特性情况，也就是下面使用prop的时候，可以写在组件上：
v-slot="slotProps",也等于v-slot:default="slotProps"（插槽的名字默认是default，可以省略），这样是用插槽的prop值，也就是slot中传入的动态属性值。
粘贴的代码如果想显示正确，需要在v-slot后加上name的值，对应上
效果：
自己测试理解下，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星