vue之slot插槽

115 阅读1分钟

slot插槽使得组件变得更加灵活更自由 父组件可以传递给子组件不同内容

slot标签无法添加事件需包裹标签添加

普通插槽

默认插槽

如父组件没有传入插槽内容 可在slot标签中编写默认内容

具名插槽

当父组件需要传递多个插槽并且需要现在在不同位置可使用具名插槽

插槽内容必须使用template包裹使用并 v-slot命名插槽

v-slot可以简写成#

作用域插槽

子组件遍历数据渲染插槽 但是插槽内容由父组件传递 需要将传递的数据绑定在slot 由子组件标签v-slot='slotProps'数据对象接收 图中将slotProps对象结构语法 直接得到item更为简洁