Comments (10)
新的自定义组件核心还是React
组件,可以参考以下的思路:
1. 在 React 中创建 Vue 的实例
import * as Vue from 'vue/dist/vue'; // 注意这里要引同时包含编译器和运行时的完整版本
import {Renderer} from '../factory' // 根据自定义组件的需求自行选择渲染器,Renderer、FormItem或者OptionsControl
@Renderer({
test: /(^|\/)hello\-vue$/
})
class VueComponent extends React.PureComponent<any>{
vm: any;
constructor(props: any) {
super(props);
this.domRef = React.createRef();
}
componentDidMount() {
// DidMount的时候实例化Vue
this.vm = new Vue({
el: '#dom',
template: '<div>Hello {{name}}</div>',
data() {
return {
name: 'Vue'
};
}
});
this.domRef.current.appendChild(this.vm.$mount().$el);
}
componentWillUnmount() {
this.vm.$destroy();
}
render() {
return (
<div ref={this.domRef}></div>
);
}
}
2. 打通和 amis 的通信
大部分情况应该是会编写基于FormItem
或者OptionsControl
的表单组件,那么amis
和Vue
之间的通信不可避免,分两个方向
vue -> amis
在实例化Vue
后,通过$on监听当前实例上的自定义事件,例如:
// 这里的this.props.onChange是amis暴露出来的方法,可以修改表单项的值
this.vm.$on('change', (value: any) => this.props.onChange(value));
监听之后在Vue实例中就可以这样使用
this.$emit('change', '新的value');
amis -> vue
有时候amis
数据的变化,也需要通知到Vue
组件中,例如给OptionsControl
配置source
动态拉取数据时,拉取到options
需要通知给Vue
组件进行更新
但是由于Vue的限制,你需要在实例化的时候声明所有响应式属性,所以在实例化Vue
组件之前,将 amis
的 props
与Vue
组件的 data
merge一下,方便后续的通信,例如:
let amisData = {};
Object.keys(this.props).forEach(key => {
const value = this.props[key];
typeof value !== 'function' && (amisData[key] = value);
});
this.vm = new Vue({
data() {
return Object.assign(amisData, {
name: 'Vue'
});
}
});
之后在componentDidUpdate
,直接通过this.vm
更新数据就可以了
componentDidUpdate() {
Object.keys(this.props).forEach(key =>
// 过滤掉function
typeof this.props[key] !== 'function' && (this.vm[key] = this.props[key]);
);
}
from amis.
应该是这样的方式, React 还是底层,Vue 组件在 React 的 didMount 中实例化出来,并打通通信。
from amis.
@RickCole21 可以来详细说一下
from amis.
@2betop 不考虑直接出个全vue版本吗?
from amis.
不考虑,这成本得多大!!
from amis.
https://elemefe.github.io/element-react/
他们家怎么做到了?
现在新业务很少会选 React 做后台了吧,基本都是Webpack+Vue做基础
from amis.
这是json renderer 不是 ui 库,用什么底层无所谓
from amis.
关于vue组件的问题,能不出一个完整的demo,从自定义组件的开发打包到实际在vue项目中运用,对于前端基础差的同学们真的是很有必要的,谢谢了
from amis.
我的方法:
import Vue from 'vue'
import VueComponent from './VueComponent '
let React = amisRequire('react')
let amisLib = amisRequire('amis')
function CustomComponent(props) {
let dom = React.useRef(null)
React.useEffect(function () {
const vm = new Vue({...VueComponent , propsData: props})
dom.current.appendChild(vm.$mount().$el)
})
return React.createElement('div', {
ref: dom
})
}
// 注意test为组件名
amisLib.Renderer({
test: /(^|\/)vue-component/
})(CustomComponent)
from amis.
我的方法:
import Vue from 'vue' import VueComponent from './VueComponent ' let React = amisRequire('react') let amisLib = amisRequire('amis') function CustomComponent(props) { let dom = React.useRef(null) React.useEffect(function () { const vm = new Vue({...VueComponent , propsData: props}) dom.current.appendChild(vm.$mount().$el) }) return React.createElement('div', { ref: dom }) } // 注意test为组件名 amisLib.Renderer({ test: /(^|\/)vue-component/ })(CustomComponent)
请问这个amis怎传数据给vue组件呢
from amis.
Related Issues (20)
- 在select的onChange里给最外层data里的变量赋值 HOT 2
- amis 显示复杂的 echarts 图表 HOT 2
- amis-editor 变量赋值-组件变量 无法根据组件ID赋值变量 HOT 1
- 增删改查组件-缓存问题
- amis-editor-demo提交的依赖更新存在问题 HOT 4
- InputDatetimeRange 首次选择时无法选择00项/日期自动跳转/最大值限制无效 HOT 1
- picker组件回显不能根据id映射name HOT 3
- 基于 tinymce的富文本能否限制最大字数
- 下拉菜单DropDownButton中的下载按钮Button弹不出文件另存对话框
- crud组件为什么不推荐设置列的宽度
- 编辑器中配置自定义样式报错:Internal React error: Expected static flag was missing. HOT 1
- 希望公式编辑器支持国际化 HOT 1
- amis editor 表单JSON会自动添加,提交按钮 HOT 2
- 定义scaffoldForm编辑器脚手架 在不操作其中组件时 pipeOut中 获取不到对应组件变量
- 为什么线上的编辑器创建表单的时候,使用场景没有【查看】这个选项?
- 【input-time】,当设置小时范围,在没有选中小时的时候,直接点击确定,会变成00:00
- 【求救】form里面配置了一个service和其他组件,为什么service返回的数据会影响到service外部的组件,按我的理解不是应该service接口返回的数据只作用在service包裹的组件上么,是用得不对吗?谁能给出一个service不影响service外部组件的配置 HOT 3
- 数字框C默认值如果设置了公式“${a +b}”,a是1,b是2,c是5, c会显示成3,实际值5,5会被默认值3覆盖,这种情况不是应该取实际值显示么,为什么会被默认值覆盖呢 HOT 3
- crud按行编辑和按单元格编辑
- JSSDK中如何重写fetcher,在保持原有fetcher行为的有情况下,拦截处理http返回的非200/201状态码 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amis.