插槽的使用
(此文从原文整理而来,更加明了简洁)
1、单个插槽(默认插槽、匿名插槽)注意:匿名插槽每个子组件只能有一个
<template>
<div class="father">
<h3>父组件</h3>
<child><!-- 子组件加载区 -->
<div class="tmpl"><!-- 匿名插槽模板 替换子组件slot插槽 -->
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
</div>
</child>
</div>
</template>
<template>
<div class="child">
<h3>子组件</h3>
<slot></slot><!-- 默认加载父组件中包含的匿名文档 -->
</div>
</template>
2、具名插槽(名字不同多个)
<template>
<div class="father">
<h3>这里是父组件</h3>
<child><!-- 子组件加载区 -->
<div class="tmpl" slot="up"><!-- 对应slot的name属性为up -->
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
</div>
<div class="tmpl" slot="down"><!-- 对应slot的name属性为down -->
<span>菜单-1</span>
<span>菜单-2</span>
<span>菜单-3</span>
</div>
<div class="tmpl"><!-- 对应匿名slot -->
<span>菜单->1</span>
<span>菜单->2</span>
<span>菜单->3</span>
</div>
</child>
</div>
</template>
<template>
<div class="child">
<h3>这里是子组件</h3>
// 具名插槽
<slot name="up"></slot>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
3、作用域插槽(带数据的插槽)
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用:用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第二次使用:直接显示数据-->
<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']
}
}
}
借鉴:点击打开链接