Vue 插槽函数有什么用? (验证组件)

What are Vue slot functions for? (Vuetify components)

Vue 中的插槽属性将子组件(插槽)的数据共享给它们的父组件,这对我来说很清楚。

但是,有时槽会在其槽属性中公开一个函数。例如,VCombobox 有一个 selection 槽,它公开了这个:

{
  parent: VueComponent,
  item: object,
  index: number,
  select: function,
  selected: boolean,
  disabled: boolean
}

select 属性 实际上是一个函数。对我来说,那种属性没有意义。

那么,这些函数试图做什么?为什么我应该在插槽中公开一个函数? (我测试调用它,它需要一个参数,出现错误)

好吧,在这种情况下,这对我来说也没有意义,因为 selection 插槽正在渲染已经选择的项目,因此共享 select 函数,其中 receives native browser event(如 click 例如)并再次选择项目 没有意义,但我相信有一个用例和原因...

但一般来说,将函数作为 slot prop 传递是非常有用的!

假设您正在创建一个“分页”组件。您的组件有一个“上一个”和“下一个”按钮。单击这些按钮时,这些按钮会在您的组件内执行某些功能(该功能可能会更改页码,可能会发送一些事件……但这在本例中无关紧要)。但是您希望为组件的用户提供定义“上一个”和“下一个”按钮的外观的选项。所以你创建了一个插槽。但与此同时,您想为插槽的用户提供一个功能,该功能应在单击按钮的“他们的”表示时执行 - 最简单的方法是将功能传递到作用域插槽中。用户可以替换视觉效果但保留原始功能...