作用域插槽实际上就是带有数据的插槽,默认插槽和具名插槽里的内容和样式都需要父组件去提供,而作用域插槽带的数据父组件可以取到,可以展示在作用域插槽中。
在父子间使用子组件的数据进行展示。
子组件
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽,携带数据data
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
父组件
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
//使用user来接收子组件中的数据,换成其他任何一个变量都可以
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用:用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用:直接显示数据-->
<child>
<template slot-scope="scope">
{{scope.data}} //同{{scope.row.data}}
</template>
</child>
<!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
参考文章:
见了 slot-scope="scope" scope.row 和 slot-scope="{row}" 别不认识怎么用!!!