vue - 插槽
2021-12-15 本文已影响0人
梁庄十年
vue官网中在2.6版本之后 插槽语法写法有过变动; 这边文章主要是参考官网和其他博客综合写的; 代码亲测有效,部分写法问题如果有疑问,可以自行官网
个人理解:
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
1. 匿名插槽
- 匿名插槽是指直接使用slot标签, 通过slot标签,可以直接在子组件中分发我们想要写入的内容
1.1 代码示例
- 父组件
<template>
<div class="common-con">
<h1>common</h1>
<CommonTable>
<!-- 显示在子组件插槽中的内容 -->
<div>hello slot</div>
</CommonTable>
</div>
</template>
<script>
import CommonTable from '../../components/table/commonTable.vue';
export default {
name: 'common',
components: {
CommonTable,
},
data () {
return {
}
},
}
</script>
<style lang="scss" scoped>
.common-con {
height: 100%;
background: #fff;
}
</style>
- 子组件
<template>
<div class="table-con">
<!-- 匿名插槽 -->
<slot></slot>
<el-table
onselectStart="return false"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'commonTable',
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
}
</script>
<style scoped>
</style>
-
页面效果
image.png
2. 具名插槽
概念: 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中
2.1 代码示例
- 子组件
<template>
<div class="table-con">
<!-- 匿名插槽 -->
<slot></slot>
<slot name="tableHeader"></slot>
<el-table
onselectStart="return false"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<!-- 匿名插槽 -->
<slot name="tableBottom"></slot>
</div>
</template>
- 父组件
<template>
<div class="common-con">
<h1>common</h1>
<CommonTable>
<!-- 通过插槽表示符name分发到子组件中的指定位置 -->
<template #tableHeader>
<h2>具名插槽 表头</h2>
</template>
<template #tableBottom>
<h2>具名插槽 表尾</h2>
</template>
<!-- 显示在子组件插槽中的内容 -->
<div>hello slot</div>
</CommonTable>
</div>
</template>
-
页面效果
image.png
3. 带有作用域的插槽
概念: 把子组件data中的数据或者子组件props中的数据传到父组件的插槽中使用;
3.1 代码示例
- 子组件
如果只有一个作用域插槽,可以不用写成具名插槽的形式; 如果是多个作用域插槽,需要给每个作用域插槽添加名字进行区分, 否则父组件在进行内容分发时,页面会显示异常;
此处时模拟的多个作用域插槽, 添加了name属性进行区分; 如果只有一个可以将name属性删除;
<template>
<div class="table-con">
<!-- 作用域插槽 如果一个组件中出现了多个作用域插槽, 可以参考具名插槽的写法进行区分-->
<slot :nameList="nameList" name="slotScopeName"></slot>
<el-table
onselectStart="return false"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<slot name="tableBottom"></slot>
<!-- 具名 作用域插槽 -->
<slot :tableData="tableData" name="slotScopeTable"></slot>
</div>
</template>
<script>
export default {
name: 'commonTable',
data () {
return {
nameList: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'],
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '赵小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '孙小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
}
</script>
- 父组件
由于当前的作用域插槽时具名插槽, 所以在父组件中的位置可以随意放置, 都可以将内容分发到子组件中的指定位置;
<template>
<div class="common-con">
<h1>common</h1>
<CommonTable>
<!-- 作用域插槽 -->
<template slot-scope="{tableData}" slot='slotScopeTable'>
<div v-for="(item, index) in tableData" :key="index">
{{`${item.name}家的地址是: ${item.address}` }}
</div>
</template>
<!-- 如果组件中出现了多个作用域插槽时, 可以通过name进行区分, 写法如下 -->
<template slot-scope="{ nameList }" slot='slotScopeName'>
<div v-for="(item, index) in nameList" :key="index">
{{`姓名: ${item}`}}
</div>
</template>
</CommonTable>
</div>
</template>
-
页面效果
image.png
