子组件写法如下
<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>
<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 '@/components/child.vue'
export default {
components: { Child }
}
</script>
可以看到,我们的父组件获取子组件传值,可以通过 v-slot
的自定义命名值来获取对象数据。
而子组件给父组件传值,如果是传单个值,可以用 :color="color"
这样的语法来进行传值。如果要传多个数据,则可以使用 v-bind
来传一个对象出去。
刚刚尝试了一下,
v-bind
可以缩写成:
也就是说,上面的代码可以写成<slot name="object" :="{ old, name }" />
,但是我个人不推荐这样写,有点懵逼。