Vue基础知识:插槽——默认插槽,插槽的后备内容,具名插槽,作用域插槽的认识与使用。(slot,#default,row的认识)
1.插槽的基本认识:
作用:让组件内部的一些结构支持自定义
插槽的分类:
1.默认插槽(组件内只能定制一处结构)
2.具名插槽(组件内可以定制多次结构)
简单而言:就是你希望封装一个组件,这个组件会在多个地方使用,但是每个使用的地方其中的内容部分又是不同的,这个时候你希望自定义,就会运用到插槽。
2.默认插槽的基础语法:
1.组件内需要定制的部分用占位
2.使用组件时,在标签内容传入替换slot的内容
下面进行代码演示:
使用slot标签占位
完成的效果图:
此时我们又会面临一个问题,如果我不给自定义内容,就不会有任何内容,这样一片空白实在是不好看。那我们如何加默认值(设置默认内容)
3.插槽的后备内容:
1.语法:在标签内,放置内容,作为默认显示内容。
作用:1.组件标签使用时没有传入内容,会slot会显示后备内容。
2.组件标签使用时有传入内容,则slot会被整体替换掉。
下面进行代码演示:
效果图:
4.插槽—具名插槽(具有名字的插槽)
上面已经讲解了默认插槽,但是它有一个明显的缺点就是只能定制一个地方。而下面所说的具名插槽就可以很好的解决这个问题。
作用:一个组件内有多处结构,需要外部传入标签,进行定制。
1.具名插槽语法:
1.多个slot使用name属性区分名字
2.template配合v-slot:名字来分发对应的标签。
3.为了方便官方(v-slot:插槽名可以简写成#插槽名)
下面进行代码演示:
效果图:
使用#插槽名演示
5.作用域插槽(是插槽的一个传参语法):
作用域插槽:定义slot插槽的同时,可以传值的,给插槽上可以绑定数据,将来使用组件时可以使用。
使用场景:
1.父传子需要渲染内容时
2.比如我们常使用的删除、编辑等功能都需要当前项的id值,但是id属于组件内部的数据通过作用域插槽传值绑定,进而使用。
作用域插槽的基本使用步骤:
1.给slot标签,已添加属性的方式传值
2.所有添加的属性,都会被收集到一个对象中去。
3.在template中,通过“#插槽名字=“obj””接收(这里的obj可以自定义,就是个对象名而已),默认插槽名为default
下面进行代码演示:
组件:MyTable.vue代码:
序号
姓名
年纪
操作
{{index+1}}
{{item.name}}
{{item.age}}
.my-table {
width: 450px;
text-align: center;
border: 1px solid #ccc;
font-size: 24px;
margin: 30px auto;
}
.my-table thead {
background-color: #1f74ff;
color: #fff;
}
.my-table thead th {
font-weight: normal;
}
.my-table thead tr {
line-height: 40px;
}
.my-table th,
.my-table td {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.my-table td:last-child {
border-right: none;
}
.my-table tr:last-child td {
border-bottom: none;
}
.my-table button {
width: 65px;
height: 35px;
font-size: 18px;
border: 1px solid #ccc;
outline: none;
border-radius: 3px;
cursor: pointer;
background-color: #ffffff;
margin-left: 5px;
}
下面是App.vue代码:
<!-- 注意要用包裹 -->
效果图: