Is there a way to prevent unnecessary props from being passed when using v-bind="$props"?

[undefinedspacex]

在使用 v-bind="$props" 传递 Props 时，有没有更简便的方式来避免传递非必要的 Prop？只允许传递在 defineProps 中明确声明的属性，不要将他们渲染为 attribute。

假设有两个组件，ListItem 和 EnhancedListItem，其中 EnhancedListItem 继承了 ListItem 的所有 props，同时还增加了自己的属性（如 type 和 beforeTrack），目前我尝试了以下两种方案：

1. 解构 Props：手动解构 props 并排除不必要的字段。
2. 使用 defineOptions({ inheritAttrs: false }); ，但需要手动处理基础属性，比如 class、style、onclick..

例如，在以下示例中，如何避免将 EnhancedListItem 的自有 Prop 传递给 ListItem 组件？

Is there a simpler way to avoid passing unnecessary Props when using v-bind="$props"?, only allow passing properties that are explicitly declared in defineProps, and prevent them from being rendered as attributes.

Suppose there are two components, ListItem and EnhancedListItem, where EnhancedListItem inherits all the props from ListItem, and also adds its own properties (like type and beforeTrack). So far, I have tried the following two solutions:

1. Destructuring Props: Manually destructuring the props and excluding unnecessary fields.
2. Using defineOptions({ inheritAttrs: false }), but this requires manually handling basic attributes such as class, style, onclick, etc.

For example, in the following case, how can I prevent the props specific to EnhancedListItem from being passed down to the ListItem component?

Vue SFC Playground

final:
Vue SFC Playground

[LinusBorg]

You listed the two methods that are available, basically. For the destructuring way, I would often rather use a helper function like lodash's omit or pick.

You could then turn that into a more descriptive Helper:

const toListItemProps (props) => pick(props, ['label', 'actions'])
```

[undefinedspacex]

Your method gave me a lot of inspiration, thank you very much! Yes, I can use lodash's pick or omit method. As the second parameter, I can directly use Object.keys(Component.props) to decide which parameters to exclude or keep. At the same time, it avoids the problem of forgetting to modify pick or omit after typescript changes.

const toListItemProps = (props) => pick(props, Object.keys(ListItem.props))

[undefinedspacex]

Of course, if in the future defineOptions provides a property to automatically solve this problem, that would be best, for now I will use pick to solve this problem