浏览页面效果如下：
那么此时遍历的效果就取决于父组件了。
作用域插槽的 vue 2.6 更新写法
上面已经基本实现了作用域插槽的基本使用，但是在 vue 2.6 版本开始，通过 slot-scope 的属性方式获取 props 值将会被逐步废弃。
更新的写法如下：
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
修改一下上面的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中作用域插槽slot</title>
<!-- 1.导入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
<!-- 2.创建app -->
<div id="app">
<child>
<template v-slot:default="props">
<li>{{props.item}} -- hello</li>
</template>
</child>
</div>
<!-- 3.创建vm -->
<script>
Vue.component("child", {
template: `<div>
<ul>
<slot v-for="item in list" v-bind:item="item"></slot>
</ul>
</div>`,
data(){
return {
list: [1,2,3,4,5,6]
}
},
});
let vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
本文分享自微信公众号 - DevOps社群（DevOpsCommunity）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。