Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【建议】1. 组件是否支持传递复杂类型,数组,对象? 2. 能否实现 @watch 监听属性,状态变化 #59

Open
zhuyuanmin opened this issue Dec 14, 2023 · 18 comments

Comments

@zhuyuanmin
Copy link

zhuyuanmin commented Dec 14, 2023

如题。 目前好像不支持。但是有别的框架(stencil)已经实现了,希望可以借鉴,完善这一块功能。

  1. @prop

地址:https://stenciljs.com/docs/properties#object-props

image
image

image
image

@prop 装饰器源码位置:https://github1s.com/ionic-team/stencil/blob/main/src/compiler/transformers/decorators-to-static/prop-decorator.ts#L41

  1. @watch

地址:https://stenciljs.com/docs/reactive-data#watch-decorator

image

@watch 装饰器源码位置:https://github1s.com/ionic-team/stencil/blob/main/src/compiler/transformers/decorators-to-static/watch-decorator.ts

@zhuyuanmin zhuyuanmin changed the title 【建议】组件是否支持传递复杂类型,数组,对象? 【建议】1. 组件是否支持传递复杂类型,数组,对象? 2. 能否实现 @watch 监听属性,状态变化 Dec 14, 2023
@sanqi-med
Copy link
Contributor

@watch 我们在开发了,复杂数据类型暂时还没支持,可以参考我们的data-picker,针对复杂的数据类型传参有参考示例

@zhuyuanmin
Copy link
Author

@watch 我们在开发了,复杂数据类型暂时还没支持,可以参考我们的data-picker,针对复杂的数据类型传参有参考示例

好的!~ 期待 。支持复杂类型有计划么?是否有办法接收到传给web-compoent组件属性的时候做一层转化?因为在现代前端框架中使用web component 组件传递复杂类型属性时需要通过 ref 来设置属性值 在使用习惯上有点奇怪。

@zhuyuanmin
Copy link
Author

另外还有一点疑惑就是:生成的 web compoennt 组件,通过获取 dom 节点 console.dir 之后,其内部属性和方法都可见,感觉像是在裸奔。是否需要提供一个装饰器包裹才表示对外暴露?我看 stencil 和 lit 框架,打印其节点,内部属性和方法对外是不可见的。

@sanqi-med
Copy link
Contributor

@watch 我们在开发了,复杂数据类型暂时还没支持,可以参考我们的data-picker,针对复杂的数据类型传参有参考示例

好的!~ 期待 。支持复杂类型有计划么?是否有办法接收到传给web-compoent组件属性的时候做一层转化?因为在现代前端框架中使用web component 组件传递复杂类型属性时需要通过 ref 来设置属性值 在使用习惯上有点奇怪。

已经安排人在调研了,感兴趣的话也欢迎PR哈!

@dyf19118
Copy link
Contributor

@zhuyuanmin watch功能已经在2.0.0版本中提供,欢迎体验并提交反馈。

@dyf19118
Copy link
Contributor

dyf19118 commented Apr 15, 2024

https://stenciljs.com/docs/properties#object-props

stencil只是在框架内部处理了复杂数据类型(stencil组件之间的复杂类型数据传递),当stencil组件跨栈作为HTML自定义元素使用时,就没有办法对其传递复杂类型数据,这是HTML attribute的局限性。因此如果要做的话,也只能是在quarkc组件之间实现。

@zhuyuanmin
Copy link
Author

zhuyuanmin commented Apr 15, 2024

https://stenciljs.com/docs/properties#object-props

stencil只是在框架内部处理了复杂数据类型(stencil组件之间的复杂类型数据传递),当stencil组件跨栈作为HTML自定义元素使用时,就没有办法对其传递复杂类型数据,这是HTML attribute的局限性。因此如果要做的话,也只能是在quarkc组件之间实现。

好的,其实也无伤大雅,dom.data 其实也可以挂载复杂数据类型

@zhuyuanmin
Copy link
Author

另外还有一点疑惑就是:生成的 web compoennt 组件,通过获取 dom 节点 console.dir 之后,其内部属性和方法都可见,感觉像是在裸奔。是否需要提供一个装饰器包裹才表示对外暴露?我看 stencil 和 lit 框架,打印其节点,内部属性和方法对外是不可见的。

这个你们有审视一下这个问题吗?

@xsf0105 xsf0105 closed this as completed Apr 15, 2024
@xsf0105
Copy link
Collaborator

xsf0105 commented Apr 15, 2024

https://stenciljs.com/docs/properties#object-props

stencil只是在框架内部处理了复杂数据类型(stencil组件之间的复杂类型数据传递),当stencil组件跨栈作为HTML自定义元素使用时,就没有办法对其传递复杂类型数据,这是HTML attribute的局限性。因此如果要做的话,也只能是在quarkc组件之间实现。

好的,其实也无伤大雅,dom.data 其实也可以挂载复杂数据类型

那还是使用状态管理工具比较好:https://github.com/hellof2e/gluang
dom.data 没法响应式

@xsf0105 xsf0105 reopened this Apr 15, 2024
@dyf19118
Copy link
Contributor

最新的2.1.1版本,@internalProp装饰器支持在quarkc组件之间传递复杂类型数据。

@zhuyuanmin

@zhuyuanmin
Copy link
Author

最新的2.1.1版本,@internalProp装饰器支持在quarkc组件之间传递复杂类型数据。

@zhuyuanmin

有使用示例吗?

@dyf19118
Copy link
Contributor

最新的2.1.1版本,@internalProp装饰器支持在quarkc组件之间传递复杂类型数据。
@zhuyuanmin

有使用示例吗?

最近比较忙,官网文档和示例还没来得及补充,这个装饰器没有额外参数,就用它来代替property装饰器即可。

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 7, 2024

我也刚好在找传递复杂对象的demo

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 7, 2024

或者源码哪个里面有我去翻一下也行

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 7, 2024

看上去internalProp的实现,html里面还不能向quarkc组件传递复杂类型

@dyf19118
Copy link
Contributor

dyf19118 commented Jun 7, 2024

看上去internalProp的实现,html里面还不能向quarkc组件传递复杂类型

这是HTML规范的限制,没法解决的。建议自行在property装饰器中使用converter选项执行复杂类型数据的反序列化。

@dyf19118
Copy link
Contributor

dyf19118 commented Jun 7, 2024

看上去internalProp的实现,html里面还不能向quarkc组件传递复杂类型

这是HTML规范的限制,没法解决的。建议自行在property装饰器中使用converter选项执行复杂类型数据的反序列化。

对于那些无法序列化的数据类型,比如说函数,那最终还是要回退到直接对元素实例赋值的方案上去。

@xsf0105
Copy link
Collaborator

xsf0105 commented Aug 28, 2024

示例:

https://quark-ecosystem.github.io/quarkc-docs/#/zh-CN/docs/innerprop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants