Vue3.0 卡槽的使用和传值
使用 v-slot 来命名后边跟卡槽要传递过来的值
子组件
slot name=名字
后边接收要传递过来的值
<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>
父组件
- 卡槽传值必须用 template 包裹,v-slot:加名字 = 后面是数据
<template>
<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>