v-slot:后边是插槽名称,v-slot=后边是组件内部绑定作用域值的映射。
v-slot="XXX",XXX是绑定属性的集合,属于自定义名称的属性
具名插槽:
<slot> 元素有一个特殊的 attribute:name。 这个 attribute 可以用来定义额外的插槽
注意 v-slot 只能添加在 <template> 上。 以下为三种不同写法
<template>
<fuji #woshizi>
父组件
</fuji>
</template>
<template>
<fuji v-slot:woshizi>
父组件
</fuji>
</template>
<template>
<fuji slot="woshizi">
父组件
</fuji>
</template>
<slot name="woshizi" />
作用域插槽: 父级无法直接渲染子级数据,需要在 元素上绑定一个属性,称为插槽 prop,在父级作用域中可以通过v-slot来定义我们的插槽名称,渲染数据
注意默认插槽的缩写语法不能和具名插槽混用,因为它会导致作用域不明确,即外部使用默认插槽的缩写,省去default:,则内不能再出现v-slot:other="xxxx"这样的方式。
子级插槽中通过:buluohe="user"传递数据,buluohe是父级调用的数据名,user为子级在Data中定义的数据名 父级通过v-slot="FatherData" 使用{{FatherData.buluohe.xxx}}渲染数据 父级需要渲染对象形式数据时,可以结构prop传来的数据,即v-slot={FatherData} 当子级拥有独一无二的name值时,可以#tebieName={FatherData} => {{FatherData.xxx}} 不过子级没有独属Name值,不能用#代替v-slot: