v-slot="arr"为什么可以、如何接受item_的数据呢
来源：1-11 作用域插槽
母鸡阿
2021-06-25 10:13:01
<!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>作用域插槽</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
// v-slot="arr" 子组件的每个item_值都会传过来保存在arr对象里
template:`
<list v-slot="arr">
<div>{{arr.item_}}</div>
</list>
`
})
app.component('list',{
data(){
return{
list:[1,2,3]
}
},
//往slot的自定义属性item_上 赋上循环的数组值
// 利用自身数据、遍历出多个插槽
// 插槽<slot></slot> 相当于父组件中 <list>内容</list> 的内容
template:`
<slot v-for="item in list" :item_="item" />
`,
})
app.mount('#root');
</script>
</html>
1回答
-
好帮手慕久久
2021-06-25
同学你好，这里是固定用法，即vue自身提供的功能。可以理解成，vue底层处理了，当我们如下这样写时，arr中会保存slot上所有的数据：
从页面上的输出结果看，arr是一个对象，因此可以通过“对象.xxx”的形式，获取到某一个具体数据。
其中，arr这个变量，名字可以自定义：
祝学习愉快！
0
相似问题