利用Vue构造器创建Form组件的通用解决方法
前言
在前端平常的业务中,无论是官网、展示页还是后台运营系统都离不开表单,它承载了大部分的数据采集工作。所以如何更好地实现它,是平常工作中的一个重要问题。
在应用Vue框架去开发业务时,会将页面上每个独立的可视/可交互区域拆分为一个组件,再通过多个组件的自由组合来组成新的页面。例如
...
...
当用户的某个行为触发表单时(例如注册、建立内容等),期望在页面中弹出一个From组件。通常的做法是在template中填入一个
当的点击事件触发时,调用register方法,将表单组件挂载在页面中。
Form组件
...
...
确定
取消
在APP组件内并未维护
组件的子类
const_constructor=Vue.extend(component)
然后returnfunction,它的功能是:
- 将组件转化为method
- 在method调用时,将组件实例化并传递propsData
const{
propsData
}=options
letinstance=new_constructor({
propsData
}).$mount(document.createElement('div'))
为了能够控制实例化后的组件,选择instance返回。
当组件实例化时,它只是挂载到document.createElement('div')上,但是并没有挂载到页面上,所以需要将其appendChild到页面中。为了更好的语义化,选择在组件的生命周期中完成它在页面中的挂载。实例化时,会触发组件mounted生命周期,所以当其触发时可以挂载在document.body中,具体如下
mounted(){
document.body.appendChild(this.$el)
}
有了挂载,就必须要有注销。对应的生命周期应该是destroyed,所以
method:{
destroyElement(){
this.$destroy()
}
},
destroyed(){
this.$el.parentNode.removeChild(this.$el)
}
组件注销的时间与它在页面中显示息息相关,当
在页面中不可见时候,需要注销它
method:{
destroyElement(){
this.$destroy()
}
},
destroyed(){
this.$el.parentNode.removeChild(this.$el)
}
一般Form组件有两个功能:
- done:代表用户确认;
- cancel:代表用户取消;
当done或cancel触发时,APP组件内可能会有相应的变化,所以在组件实例化之后,利用$on去监听对应的done事件以及cancel事件。
done&&inlineListen({
method:'done',
options,
instance
})
cancel&&inlineListen({
method:'cancel',
options,
instance
})
其中inlineListen函数可以方便后续添加其他的event,其代码为
constinlineListen=({
method,
options,
instance
})=>{
letlistener=`on${method}`
instance[listener]=options[method]
instance.$on(method,function(data){
this[listener](data)
})
}
也可以将上述方案封装成Promise形式,如下
exportconsttransform=(component)=>{
const_constructor=Vue.extend(component)
returnfunction(options={}){
const{
propsData
}=options
returnnewPromise((resolve,reject)=>{
letinstance=new_constructor({
propsData
}).$mount(document.createElement('div'))
instance.$on('done',data=>resolve(data))
})
}
}
使用
可以将上述属于
公有的data以及method独立出来,再通过mixins引入到每个表单内,例如
exportdefault{
data(){
return{
visible:true
}
},
watch:{
visible(newValue){
if(!newValue){
this.destroyElement()
}
}
},
mounted(){
document.body.appendChild(this.$el)
},
destroyed(){
this.$el.parentNode.removeChild(this.$el)
},
methods:{
destroyElement(){
this.$destroy()
},
close(){
this.visible=false
}
}
}
再通过mixins混入。
调用时,只需
exportdefault{
name:'App',
methods:{
register:transform(register),
handleClick(){
this.register({
propsData:{
...
},
//done:data=>function
done(){
//外部关闭
this.close()
}
})
}
}
}
PS:如果业务场景需要,在外部控制表单的关闭时,只需要改变donefunction的context,也就是this指针指向
。
总结
通过上述的transform函数,将原有的注入式组件转化为了命令式,简化了页面状态的维护,在通过mixins混入公有data以及method,简化了表单组件开发。上述方法也可用于开发toast、alert、confirm等组件,只需要将
Vue.prototype.method=transform(Toast-Component)
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。