属性穿透失败

[guaijie]

Vue version

3.4.25

Link to minimal reproduction

https://play.vuejs.org/#eNqFUk1v2zAM/SucLnYAz0GwnTrb2AcKbDtsRVugF10Mm3HUypIgyWkAw/+9lFynadGPk02+R/GRfCP7YUy+H5CdscI1VhgPDv1gKq5Eb7T1MILFLUywtbqHhKjJEfqle/OYz9chCC8RzFWjlfPQuw7KUJ4mv1FKDTfayvZTsuKqWM/dqA8FHnsja48UARS7TTWOsXiaijVFMSuUGTzsP/e6RVlyRjhnsJ7BqKSRtXOExC9hoqVAtPT3vZGiuaMoXUFZwRjkaYm51F262awmzqqGXijiEBUEeSeSWMa8o5Kt6PJbpxXtagxdqRPRhUT733hBT3J2BhEJWE0D3/+NOW8HzJZ8s8Pm7pX8rTuEHGcXFh3aPXJ2xHxtO/QzfH71Dw/0fwRpIYMk9jvgJdK4Q9A4034OqiXZJ7yo9k88q1DdtTs/eFRuGSoIDcwp8jmjM4dNvTX6k9wv+ddYx9VEW1ws8tJsIGvV0XU8PXNqvF0Gg8Mrqb17ZsBvi8FchMojKyVnLVi0RAnzxXdp0op9ksE4ZXPVBx6M1cFcz50wPQBvfw8R

Steps to reproduce

ru如图所示：事件 click 和 class 成功穿透传递给了 div , 但是 id 并未传给 div

What is expected?

宿主元素 div 应该有属性 id="id"

What is actually happening?

宿主元素 div 应该没有属性 id="id"

System Info

No response

Any additional comments?

No response

[jh-leong]

This behavior seems to be expected. Ref: vuejs/rfcs#154

Functional components without a props declaration will have everything passed in as props. They will only have implicit fallthrough for class, style, and v-on listeners.

By the way, I couldn't find this mentioned in the documentation. Perhaps we should add this information?

Edit: The documentation Functional Components includes this information.

[Shyam-Chen]

import { h, useAttrs, useSlots } from 'vue';

const attrs = useAttrs();
const slots = useSlots();

const Comp = () => h('div', attrs, slots);

[guaijie]

import { h, useAttrs, useSlots } from 'vue';

const attrs = useAttrs();
const slots = useSlots();

const Comp = () => h('div', attrs, slots);

这只是在这个 bug 尚未解决前的一个临时写法，但不能掩盖作为 bug 的事实

[Shyam-Chen]

我認為是預期的，因為你不沒有傳 attrs 而是傳 {}

你可以改用:

https://vuejs.org/guide/components/attrs.html#fallthrough-attributes

<template>
  <div><slot></slot></div>
</template>

[guaijie]

我認為是預期的，因為你不沒有傳 attrs 而是傳 {}

你可以改用:

https://vuejs.org/guide/components/attrs.html#fallthrough-attributes

<template>
  <div><slot></slot></div>
</template>

怎么会符合预期了，事件、style 和 class 都传递过去了
属性穿透的意思官方文档有明确说明。这跟预先传值有什么关系

[guaijie]

This behavior seems to be expected. Ref: vuejs/rfcs#154

Functional components without a props declaration will have everything passed in as props. They will only have implicit fallthrough for class, style, and v-on listeners.

By the way, I couldn't find this mentioned in the documentation. Perhaps we should add this information?

Edit: The documentation Functional Components includes this information.

为什么要让函数式组件的行为和模板语法的行为表现的不一样

[yyx990803]

• Functional components with explicit props behaves the same as SFC components (because props declarations are required in SFC components)
• Functional component without explicit props have different behavior because we can't treat all props as fallthrough.

This is documented and expected behavior.