Action-Sheet 展示页面出现关于 default slot 的警告

[b2nil]

开发工具所报的警告信息如下：

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.

原因是组件插槽所插入的是插槽内容，而非函数值。Vue3 推荐使用函数式插槽，以便获得更佳的性能。

h(AtActionSheetHeader, null, props.title) // 不推荐的写法

正确的写法如下：

h(AtActionSheetHeader, null, { default: () => props.title })

[wmdsj-z]

函数也会有警告是啥鬼

[b2nil]

@wmdsj-z

ElTable 的子节点也需要传入函数式插槽，直接传数组是会报警告信息的。

createVNode(ElTable, {}, { default: () => [
  createVNode(ElTableColumn, {}),
  ...
]})

[LBJDJW]

谢谢！

[LBJDJW]

我今天看到你的问题 解决了 我也遇到了 报了警告 Non-function value encountered for default slot. Prefer function slots for better performance

[Minitiai]

[Vue warn]: Slot "columns" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

v-slots={{ columns: () => slots.tableColumns() }}
我应该肿么使用？

[b2nil]

@Minitiai
使用 jsx 的话，遵照 @vue/jsx-next 的语法来用。
从错误信息来看，你应该将代码放到 render 函数里面。

// 在 setup 中返回 render 函数
setup(props, { slots }) {
  ...
  return () => {
     return (/* jsx 代码 */)
  }
}

// 或直接使用 render
render() {
  return (/* jsx 代码 */)
}