<!--第三次使用：直接显示数据-->
<child>
<template slot-scope="user">
{{user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
子组件：
<template>
<div class="child"> <h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] }
}
}
结果如图所示：
github
以上三个demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。
地址点这里
最后
希望本文所述对你有所帮助，vue中slot与slot-scope的具体使用就给大家介绍到这里了。希望大家继续关注我们的网站!
