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