search

Tencent / tdesign-vue

A Vue.js UI components lib for TDesign.
https://tdesign.tencent.com/vue
MIT License
909 stars 350 forks source link

[Collapse] t-collapse-panel 报slot v-bind without argument expects an Object #2160

Open huangpiqiao opened 1 year ago

huangpiqiao commented 1 year ago

tdesign-vue 版本

1.1.2

重现链接

https://codesandbox.io/s/tdesign-vue-demo-forked-fmyzut?file=/src/panel.vue:52-67

重现步骤

1.t-collapse-panel绑定$attrs即v-bind="$attrs"

image

期望结果

v-bind="$attrs"能正常使用

实际结果

v-bind="$attrs"时报slot v-bind without argument expects an Object

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

github-actions[bot] commented 1 year ago

👋 @huangpiqiao，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

github-actions[bot] commented 1 year ago

♥️ 有劳 @asbstty 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @huangpiqiao 。

huangpiqiao commented 1 year ago

修正一下：是下面的v-bind问题，现在slot传的参数也就是图中的data是空的，原来是个空对象

企业微信截图_bc638dd6-8645-4f1b-bc81-38fa612ccab7
asbstty commented 1 year ago

最新代码在给slot传递参数的时候，将渲染函数传递给了slot，导致作用域插槽的参数为函数，使得v-bind报错。 出现问题的代码如下

src/hooks/tnode.ts

function handleSlots(slots: SetupContext['slots'], name: string, params: Record<string, any>) {
  const finaleParams = h;
  if (params) {
    Object.assign(finaleParams, params);
  }
  let node = slots[camelCase(name)]?.(finaleParams);   //这个地方将渲染函数传递给了作用域插槽
  if (node) return node;
  node = slots[kebabCase(name)]?.(finaleParams);
  if (node) return node;
  return null;
}

不太确定这里为什么要这样做，@chaishi帮忙看下吧

uyarn commented 1 year ago

vue2对这里限制了object/array类型 写法改下 手动展开就可以了 如 image image