老师，执行顺序有点不清晰，v-slot=“”和<slot></slot>和<slot/>的写法不理解
来源：1-11 作用域插槽
母鸡阿
2021-06-23 17:24:47
<!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_上 赋上循环的数组值
template:`
<slot v-for="item in list" :item_="item" />
`,
})
app.mount('#root');
</script>
</html>
1回答
-
好帮手慕久久
2021-06-23
同学你好，解答如下：
1、<slot></slot>和<slot />是等价的，后者是前者的简写形式。即如下两种写法等价：
2、v-slot用来接收，定义slot时，在slot身上绑定的数据。如下：
3、为了更方便的解释执行顺序，老师给list组件添加一个父元素：
执行顺序如下：
父元素中使用了子组件list，而子组件的外层元素是div.test，内层元素是利用自身数据遍历出了三个插槽:
每个插槽的具体结构由父组件确定，同时父组件接收插槽中的数据，并渲染到具体结构中：
最终效果如下：
祝学习愉快！
0
相似问题