[Question] Help 如何通过defineComponent(function xxxx(props) {}} 方式获取props传参

[GamesSoul]

🧐 Problem Description

如果直接通过
defineComponent(function xxxx(props) {}} )
里获取props的话 会拿不到props里的数据 通过 在 函数内使用 defineProps 也是拿不到对应的值 包括通过使用toRef 和 toRefs 也拿不到
必须要通过才能拿到 有什么更简洁的方式么
defineComponent({
props: ['xxx']
setup (props) {
return () => props.xxx
}
})

💻 Sample code

defineComponent(function xxxx(props) {
return () => props.xxx // undefined
}} )

[funny-family]

@GamesSoul here is exapmle of component with props that you can take a look.

[GamesSoul]

@GamesSoul here is exapmle of component with props that you can take a look.

thanks

[zanllp]

函数式组件可以这样，其他的还是老实写props。defineProps是宏是给<script setup>用的

[funny-family]

@zanllp no need to define onClick prop since if already exists in attrs.

[zanllp]

@zanllp no need to define onClick prop since if already exists in attrs.

it's required in ts.

[funny-family]

@zanllp you right. But typings are used incorrectly.

[GamesSoul]

函数式组件可以这样，其他的还是老实写props。defineProps是宏是给<script setup>用的

函数式组建的缺点也很明显 无法使用expose 生命周期不是很规律， 如果在组建内声明了reactive 或者 ref 一旦更新也会导致函数式组建整个组建重新加载 缺点比较大 目前看来vue的函数式组建这块开发的便捷程度跟react相比是差了些

[zanllp]

函数式组件你就别用reactive或者ref了，它自身没有任何状态，也没常规的生命周期。这点和react的不一样

[GamesSoul]

函数式组件你就别用reactive或者ref了，它自身没有任何状态，也没常规的生命周期。这点和react的不一样

这样的话缺点就很明显了 如果我把用的某个ui框架的table封装一层的话光是table的props传参都能把人搞吐血

[zanllp]

如果是想要一次性传很多参数 可以参考这个 #217

[GamesSoul]

如果是想要一次性传很多参数 可以参考这个 #217

这种写法没办法控制props接收哪些参数， 在目前的jsx里的setup函数中如果没有在实例上配置props接收哪些参数就没办法作用到指定的功能，我在项目中尝试把element-plus的table封装了一层 后面发现封装的代价太大了