文章目录
插槽是什么
怎么用插槽？
具名插槽
插槽的默认内容
作用域
总结
插槽是什么
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
怎么用插槽？
<van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<slot :list="list"></slot>
</van-list>
</van-pull-refresh>
1
2
3
4
5
例如在这个例子中 slot就是插槽,上面的内容是父组件
:list="list"就是父组件传的数据给插槽
具名插槽
<template>
<div class="about">
<slot name="default"></slot>
<slot name="bottom" v-bind:arr="arr"></slot>
<slot name="header" v-bind:list="list"></slot>
<slot name="middle"></slot>
</div>
</template>
1
2
3
4
5
6
7
8
在子组件中定义了三个slot标签，分别添加了name属性header,middle和footer
<DemoView>
<!-- vue 中插槽 slot => 插槽部分-->
<template #header>
</template>
<template v-slot:middle>
</template>
</DemoView>
1
2
3
4
5
6
7
在父组件中可以写入对应的slot值来指定该内容在子组件中现实的位置
插槽的默认内容
可以在子组件的slot标签中写入内容，当父组件没有写入内容时会显示子组件的默认内容，当父组件写入内容时，会替换子组件的默认内容
<DemoView>
<!-- vue 中插槽 slot => 插槽部分-->
<template #header>
<h2>顶部</h2>
</template>
<template v-slot:middle>
<h2>中间</h2>
</template>
<template v-slot:bottom="{ arr }">
<h2>底部{{ arr }}</h2>
</template>
</DemoView>
1
2
3
4
5
6
7
8
9
10
11
12
作用域
子组件
<template>
<div class="about">
<slot name="default"></slot>
<slot name="bottom" v-bind:arr="arr"></slot>
<slot name="header" v-bind:list="list"></slot>
<slot name="middle"></slot>
</div>
</template>
<script>
export default {
data: function () {
return {
list: [1, 2, 3], // 请求回来的数据
arr: [4, 5, 6],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
父组件
<DemoView>
<template #header="slotProps">
<h2>顶部{{ slotProps.list }}</h2>
</template>
<template v-slot:middle>
<h2>中间</h2>
</template>
<template v-slot:bottom="{ arr }">
<h2>底部{{ arr }}</h2>
</template>
</DemoView>
1
2
3
4
5
6
7
8
9
10
11
从父组件传值到router-view里,再传到插槽里
总结
