本文主要是介绍amis 联动效果触发的几种方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
联动效果实现主要俩种方式:
1.表达式实现联动,基于组件内或数据链的变量变化的联动
比如： "source": "/amis/api/mock2/options/level2?name=${name} " (必须是这种字符串拼接形式,在data数据映射中表达式不会触发联动)
所有初始化接口链接上使用数据映射获取参数的形式时，例如下面的query=${query}，在当前数据域中，所引用的变量值（即 query）发生变化时，自动重新请求该接口
接口联动一般只适用于初始化接口，例如：
• form组件中的initApi；
• select组件中的source选项源接口url, data只能用于主动联动；
• service组件中的api和schemaApi；
• crud组件中的api；（crud 默认是跟地址栏联动，如果要做请关闭同步地址栏 syncLocation: false）
• 等等...
如果 api 地址中有变量，比如 /api/mock2/sample/${id}，amis 就不会自动加上分页参数，需要自己加上，改成 /api/mock2/sample/${id}?page=${page}&perPage=${perPage}
2.平级且会创建新数据域的组件间联动,无法通过引用链获取到的变量需使用此方式
2-1.通过Form的target属性
form配置target属性为目标组件name值，可以在触发提交行为后，将当前表单的数据域发送给目标组件(数据域中),并触发刷新重新调查询接口.
有一个表单form组件，还有一个列表组件crud，我们想要把form提交的数据，可以用作crud的查询条件，并请求crud的接口，由于form和crud位于同一层级，因此没法使用数据链的方式进行取值
进行两个调整：
1. 为crud组件设置了name属性为mcrud
2. 为form组件配置了target属性为crud的name：mcrud
更改配置后，提交form表单时，如果有配置提交接口，会先请求提交，之后 amis 会寻找target所配置的目标组件，把form中所提交的数据，发送给该目标组件中，并将该数据合并到目标组件的数据域中，并触发目标组件的刷新操作，对于 CRUD 组件来说，刷新即重新拉取数据接口
2-1.利用target实现inputTree与crud联动效果
(input-tree必须与form结合使用,form数据域里是{input-tree的name:输入值} ,点击input-tree不同选项时就会修改form数据域里的输入值 .
配置form的target为crud的name, 并配置"submitOnChange": true,form数据域的值变化后触发form的提交行为,提交到配置的target组件中 )
form配置target属性为目标组件name值，可以在触发提交行为后，将当前表单的数据域发送给目标组件,并触发刷新.
{"type": "page","id": "u:1c2c81063ddc","body": [{"type": "grid","columns": [{"body": [{"type": "form","id": "u:388c62109ac9","target": "mcrud","wrapWithPanel": false,"resetAfterSubmit": false,"debug": false,"submitOnInit": false,"submitOnChange": true,"body": [{"type": "input-tree","name": "modelClass","submitOnChange": true,"selectFirst": true,"source": {"method": "get","url": "/lbserver/api/ModelClass/findOptions","cache": 5000,"adaptor": "return {\n status: 0,\n msg: 'ok',\n data: {\n options:[\n{\"label\":\"全部分类\",value:\"\"},...payload.data.options\n ]\n }\n}","dataType": "json"},"height": "1000px","inline": false,"inputClassName": "h-full","id": "u:c519d9987ae7","multiple": false,"enableNodePath": false,"hideRoot": true,"showIcon": true,"initiallyOpen": true}]}],"id": "u:f32da427bbcd"},{"body": [{"type": "crud","name": "mcrud","api": {"url": "/lbserver/api/PageTemplate","method": "get","replaceData": false,"loadDataOnce": false,"dataType": "json","requestAdaptor": "let modelClass = api.query.modelClass;\r\nlet filter = {\r\n 'limit': api.query.perPage,\r\n 'skip': (api.query.page * api.query.perPage - api.query.perPage),\r\n where: { modelClass: { like: modelClass || '' } },\r\n}\r\n\r\nlet url = api.url.split(\"?\")[0];\r\nurl = `${url}?filter=${JSON.stringify(filter)}`;\r\napi.url = url;\r\nreturn api;","data": {"&": "$$","modelClass": "${modelClass}"}},"columns": [{"name": "modelClass","label": "模型分类","align": "center","width": 170,"placeholder": "-","id": "u:c9b9842b2ffe","type": "tree-select","quickEdit": {"mode": "inline","type": "select","label": "","name": "modelClass","checkAll": false,"source": {"method": "get","url": "/lbserver/api/ModelClass/findOptions","cache": 5000},"placeholder": "-","size": "sm","submitOnChange": true,"id": "u:2c4985d29548","multiple": false,"disabled": true},"fixed": "","disabled": true},{"name": "name","label": "命名ID","align": "center","width": 280,"id": "u:c9c35d484864","fixed": "","placeholder": "-"},{"label": "页面名称","align": "center","width": 200,"placeholder": "-","id": "u:edb4c2a1d1a4","name": "title"},{"label": "描述信息","name": "desc","width": 280,"type": "text","className": "word-break text-center white-space-pre","fixed": "","inline": false,"toggled": true,"placeholder": "-","id": "u:5fb7eb4c5190","align": "center"}],"messages": {},"syncLocation": false,"perPageAvailable": [10],"defaultParams": {"perPage": "10"},"footerToolbar": [{"type": "bulk-actions"},{"type": "pagination"},{"type": "statistics","tpl": "内容"}],"silentPolling": true,"className": "word-break ","fixed": "right","inline": false,"stopAutoRefreshWhenModalIsOpen": true,"toggled": true,"checkAll": false,"keepItemSelectionOnPageChange": false,"autoFillHeight": false,"id": "u:faeebfd2d01c"}],"id": "u:1a430e75198f"}],"id": "u:36da4c4f7f94"}]
}2-2.更高级更通用的是借助事件-动作（Event-Action）
比如通过setValue动作，修改另一个同级form表单的数据
动作setValue(组件中传递的参数必须是value, args: {value: {age:17} })
第一个form：
{"type": "form","title": "表单","body": [{"label": "文本框","type": "input-text","name": "text","id": "u:fdd256b622e0"}],"debug": true
}第二个form中配置setValue动作：
"onEvent": {"click": {"actions": [{"componentId": "u:c123bdb1db9e", //方式一：设置到form中"args": {"value": "${event.data}" //此组件数据域(event.data)中数据全部传入. },"actionType": "setValue"},{"actionType": "custom",//方式二：setValue到input组件，直接value:组件数据即可"script": "\nconsole.log(context.props, event)\ndoAction({\n actionType: 'setValue', \n componentId: 'u:fdd256b622e0', \n args: {value: 17 }\n});\n"}],"weight": 0}}这篇关于amis 联动效果触发的几种方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
