5.v-slot:
插槽, 具名插槽 slot,
slot-scope过时了 2.6.0使用v-slot语法:v-slot:插槽名
语法糖:#插槽名
设计组件里面:
默认槽位:< slot> < /slot>
具名槽位:< slot name="s1"> < /slot> < slot name="s2"> < /slot>
使用组件时:
< 组件名> 尖括号中的东西插入默认槽位 < /组件名>
< 组件名>
< template v-slot:s2>插入东西必须放这个标签中,老版本不用< template>
< template #s1>插入东西必须放这个标签中,老版本不用< template>
< /组件名>
总结: v-slot:s2 是具名插槽的用法 #s1是插槽的语法糖
举例：
App.vue文件
<template>
<div class="mainbox">
<tbos>
<b>插槽数据b>
tbos>
div>
template>
<script>
import tbos from "./components/tbos.vue"
export default {
data(){
return{
}
},
components:{
tbos
}
}
script>
<style>
.mainbox{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
style>
tbos.vue文件
<template>
<div class="tbos">
<slot>slot>
<p>上面是插槽数据p>
<p>内容p>
div>
template>
<style>
.tbos{
width: 300px;
height: 200px;
background-color: aqua;
}
style>
没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据插槽名不用使用引号引起来,直接写变量名
具名插槽：
插入的内容必须是template标签或者组件 不能是原生的元素
举例：
App.vue文件
<template>
<div class="mainbox">
<tbos>
<p>插槽数据p>
<template v-slot:s2>
<p>name值为s2的插槽值p>
template>
<template v-slot:s1>
<b>name值为s1的插槽值b>
template>
tbos>
div>
template>
<script>
import tbos from "./components/tbos.vue"
export default {
data(){
return{
}
},
components:{
tbos
}
}
script>
<style>
.mainbox{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
style>
tbos.vue文件
<template>
<div class="tbos">
<slot name="s2">slot>
<slot>slot>
<slot name="s1">slot>
<p>上面是插槽数据p>
<p>内容p>
div>
template>
<style>
.tbos{
width: 300px;
height: 200px;
background-color: aqua;
}
style>