quark-core icon indicating copy to clipboard operation
quark-core copied to clipboard

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

Open zhuyuanmin opened this issue 2 years ago • 18 comments

如题。 目前好像不支持。但是有别的框架(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 avatar Dec 14 '23 05:12 zhuyuanmin

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

sanqi-med avatar Dec 14 '23 10:12 sanqi-med

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

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

zhuyuanmin avatar Dec 14 '23 11:12 zhuyuanmin

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

zhuyuanmin avatar Dec 14 '23 12:12 zhuyuanmin

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

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

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

sanqi-med avatar Dec 15 '23 02:12 sanqi-med

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

dyf19118 avatar Apr 14 '24 08:04 dyf19118

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

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

dyf19118 avatar Apr 15 '24 06:04 dyf19118

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

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

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

zhuyuanmin avatar Apr 15 '24 07:04 zhuyuanmin

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

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

zhuyuanmin avatar Apr 15 '24 07:04 zhuyuanmin

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

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

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

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

xxxsf avatar Apr 15 '24 08:04 xxxsf

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

@zhuyuanmin

dyf19118 avatar May 14 '24 07:05 dyf19118

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

@zhuyuanmin

有使用示例吗?

zhuyuanmin avatar May 15 '24 06:05 zhuyuanmin

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

有使用示例吗?

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

dyf19118 avatar May 29 '24 16:05 dyf19118

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

yoyo837 avatar Jun 07 '24 10:06 yoyo837

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

yoyo837 avatar Jun 07 '24 10:06 yoyo837

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

yoyo837 avatar Jun 07 '24 10:06 yoyo837

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

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

dyf19118 avatar Jun 07 '24 13:06 dyf19118

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

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

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

dyf19118 avatar Jun 07 '24 13:06 dyf19118

示例:

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

xxxsf avatar Aug 28 '24 05:08 xxxsf