前言
记录一下在项目中使用到的插槽,在vue项目中,使用到的插槽还挺多的
定义: 把不确定的、希望由具体页面指定的部分定义为插槽,即组件封装期间,为 具体页面预留的占位符
默认插槽
<!-- 父组件中: -->
<son>
<div>插槽内容</div>
</son>
<!-- 子组件中: -->
<template>
<div>
<!--定义插槽-->
<slot>插槽默认内容</slot>
</div>
</template>
如果父组件中使用子组件时,中间没有定义一个div或者其他标签,就会显示插槽默认内容
如果中间定义了标签,就会显示标签里面的内容,比如上面的插槽内容
具名插槽
一个组件可能存在许多插槽,可能都在不同的地方,所以需要命名
<!-- 普通使用方法: -->
<view slot="title"></view>
<!-- 定义: -->
<slot name="title"></slot>
数据插槽
在使用组件时,需要携带数据过去,如下:
<!-- 父组件使用: -->
<template v-slot:title="{ count }">
<text>
<span class="file-card">
登记证
<u-badge
:count="count"
type="error"
size="mini"
:offset="[-10, -10]"
></u-badge>
</span>
</text>
</template>
<!-- 定义: -->
<slot name="title" :count="newFileCount"></slot>
踩坑记录
之前踩过一次坑,father
和son
组件都存在obj
,o
bj是从father
传入son
中去的,但是又从son
中定义数据插槽,所以当father
组件的obj
改变时,但是son
的obj
未改变,所以son
组件的插槽中的页面一直没有重新渲染,请教了同事,才发现vue官网有这么一句话:
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
a-table中的表头插槽
虽然ant design
中的table
功能比较齐全,但是还是有需要到使用到插槽的地方,比如动态表头,表头数据需要编辑等等
在column
中定义一个命名为distance2
的插槽:
{
align: 'center',
slots: {
title: 'distance2' }, // title属性置空
children: [
{
title: '设计',
align: 'center',
width: '100px',
dataIndex: 'VDesign2',
scopedSlots: {
customRender: 'vDesign2' },
},
{
title: '实测',
align: 'center',
width: '100px',
dataIndex: 'VActual2',
scopedSlots: {
customRender: 'vActual2' },
},
{
title: '差值',
align: 'center',
width: '100px',
dataIndex: 'VDeviation2',
scopedSlots: {
customRender: 'vDeviation2' },
},
],
},
在a-table
中使用:
<template slot="distance2">
距中桩2
<br />
<a-input-number
:precision="3"
v-model="CS102_M1.Distance2"
:ref="'inputValTopI2'"
@pressEnter="pressEnter(-1, 'Top', 3)"
@blur="fixedNum(CS102_M1, 'Distance2', CS102_M1.Distance2, 3)"
/>
</template>