利用Vue构造器创建Form组件的通用解决方法

return {
input: '',
gender: 1
}
},
methods: {
handleClick ({ type }) {
const handler = {
close: () => this.close(),
confirm: () => {
const { input } = this
this.$emit('done', input)
}
}
}
}
}
</script>

调用时，只需

export default {
 name: 'App',
 methods: {
 register: transform(register),
 handleClick () {
  this.register({
  propsData: {
   ...
  },
  // done: data => function
  done () {
   // 外部关闭
   this.close()
  }
  })
 }
 }
}

PS：如果业务场景需要，在外部控制表单的关闭时，只需要改变done function的context，也就是this指针指向<Form/>。

总结

通过上述的transform函数，将原有的注入式组件转化为了命令式，简化了页面状态的维护，在通过mixins混入公有data以及method，简化了表单组件开发。上述方法也可用于开发toast、alert、confirm等组件，只需要将

Vue.prototype.method = transform(Toast-Component)

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。