自定义vue组件 如何与amis组件实现交互

[taolei1990]

No description provided.

[wibetter]

能否详细描述一下你说的交互具体是什么？

[taolei1990]

@wibetter 感谢能在万忙中回复信息
我看见例子中有vue2写的一个组件 我就想自己实现一个组件

具体交互是这样的我想点击1按钮改变2组件的内容 点击2里面的按钮 改变3里面的数据

[wibetter]

自定义组件其实和amis-editor自身的组件的处理逻辑是一致的，amis-editor的组件怎么用，自定义组件就可以怎么用哈，比如你说的自定义组件和外层amis-editor组件怎么联动，有两种可用的方案：一、把自定义组件改成容器类组件，自定义容器类组件里面可以放置amis-editor组件，之后的联动，跟原有的组件联动是一个逻辑；二、自定义组件本地想实现相关联动，可以通过给自定义组件设置关联属性（比如关联外层表单的某个字段），然后自定义组件里面监听其改动，并在进行相应的交互联动。

[wibetter]

自定义组件也在amis数据域链中，可以直接读取其数据域中的数据，前提是需要设置成自定义组件的props。

[taolei1990]

非常感谢
点击1按钮改变2组件的内容可以实现 思路是把自定义组件放到 amis-editor 的容器组件中然后自定义组件能直接读取容器数据
点击2里面的按钮 改变3里面的数据还没得思路望指导一下

[wibetter]

@taolei1990 点击2里面的按钮 改变3里面的数据有很多实现方法，有一个比较简单的思路，让2里面的按钮 和 3里面的内容同时监听外层的form中的某个数据字段，然后点击2里面的按钮改动这个数据字段。

[tangchaoren1]

项目clone下来 执行yarn 命令。启动以后项目直接报错了。。想问下有什么解决方案吗？ 报错内容如下：
Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'apex')
at registerLanguage (.contribution.js:68:35)
at eval (apex.contribution.js:12:67)
at Module../node_modules/monaco-editor/esm/vs/basic-languages/apex/apex.contribution.js (vendors-include-loader_node_modules_amis_node_modules_monaco-editor_esm_vs_editor_editor_main_js.js:10171:1)
at webpack_require (index.js:12142:33)
at fn (index.js:12405:21)
at eval (editor.api.js?include-loader:91:1)
at Object.include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.api.js (vendors-include-loader_node_modules_amis_node_modules_monaco-editor_esm_vs_editor_editor_main_js.js:8741:1)
at webpack_require (index.js:12142:33)
at fn (index.js:12405:21)
at eval (.contribution.js:6:79)

[wibetter]

@tangchaoren1 刚试了一下执行yarn命令后，再执行 yarn dev能正常跑起来。确认一下你的node版本是不是太老了，另外执行yarn前把node_modules删除一下，

[tangchaoren1]

1. master分支clone代码
2. 本地 yarn
3. yarn dev
4. 左侧点击代码菜单：代码处显示空白。再次点击右侧编辑区域，浏览器控制台报错。

浏览器报错信息如下： TypeError: Cannot set properties of undefined (setting 'apex')

node版本 v16.13.2
npm 版本 v8.3.2

另：node_modules删除了 执行npm i --s 也有同样问题出现

[taolei1990]

@tangchaoren1 老铁应该是你本地环境问题 我这边也可以正常运行的

[wibetter]

@tangchaoren1 这个是用master分支构建的线上示例：https://aisuda.github.io/amis-widget/test/preview.html，

[wibetter]

@tangchaoren1 用yarn安装后按你的方式复现了，我先定位下，跟monaco-editor可能有关系，

[wibetter]

@tangchaoren1 已经修复了，试了一下 yarn 和 npm 的安装方式，都能正常跑起来。重新拉下代码，安装前删除node_modules和lock文件。

[tangchaoren1]

老哥，大赞啊！问题迅速得到解决！

[tangchaoren1]

有没有微信或者QQ交流群啊

[wibetter]

如流 搜下：3395342 ，群名：（外部）suda/amis 用户交流。备注：如流，百度旗下新一代智能工作平台。

[tangchaoren1]

如流 搜下：3395342 ，群名：（外部）suda/amis 用户交流。备注：如流，百度旗下新一代智能工作平台。

群成员满了

[wibetter]

@tangchaoren1 如流创建的交流群确实满了，后面有啥问题还是继续提issue哈