当前位置 博文首页 > 要上位的程序猿的博客:Vue3.0----卡槽的使用和传值
使用v-slot来命名后面跟卡槽要传递过来的值
<template>
<table>
<tr>
<th>默认插槽:</th>
<td>
<slot />
</td>
</tr>
<tr>
<th>具名插槽:</th>
<td>
<slot name="footer" />
</td>
</tr>
<tr>
<th>传参插槽:</th>
<td>
<slot name="bottom" :color="color" />
</td>
</tr>
<tr>
<th>传对象参插槽:</th>
<td>
<slot name="object" v-bind="{ old, name }" />
</td>
</tr>
</table>
</template>
<script>
export default {
setup() {
return {
color: 'red',
old: 34,
name: 'FungLeo',
}
},
}
</script>
<Child>
这些文字将显示在组件默认插槽内
<template v-slot:footer> 这里的文字会显示在组件的具名插槽内 </template>
<template v-slot:bottom="scope">
文字右边会有个颜色值 >>> {{scope.color}}
</template>
<template v-slot:object="scope">
文字右边会有多个数据 >>> 名字:{{scope.name}},年龄:{{scope.old}}
</template>
</Child>
</template>
<script>
import Child from './H1'
export default {
components: { Child },
}
</script>
cs