baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.28k stars 2.51k forks source link

基于数据的组件通信 #1991

Closed zimo888 closed 1 year ago

zimo888 commented 3 years ago

是否关联于某个问题吗:

Amis 作为组件库使用的时候,组件通信这块是过组件的 scope.getComponentByName 实现的, 还有一种场景是页面内组件数量较多时候,组件需要Lazyload, 未渲染的组件还没有注册到scopes中去。 此时想进行组件通信,则需要基于数据进行组件通信了。

预期的解决方案:

1.可以设置属性开启数据通信模式

  1. Value 从现在的简单类型改成对象类型应该可以解决

使用方式


let formApi;

render( {
   "type":"form",
  "onReady": (scope) =>{
      formApi = scope
   },
   controls:[]
 })

formApi.setValues({
    "name":"age",
   "value":{
       value:  20,
        params: {
               required: true,
               validatiions: {}
         }
   }
 })

当 age 组件渲染的时候,把params 里面的属性和 schema 里面的属性进行合并,这样就实现了数据方式通信,也不用关心 scope里面name的层级问题。 组件也实现了设计时和运行时都能改属性的方式。 Table 等组件也可以做横向、纵向的虚拟滚动了。

hsm-lv commented 1 year ago

事件动作支持跨层级交互 https://baidu.github.io/amis/zh-CN/docs/concepts/event-action