更好的封装Vue3组件

最近在写公司的组件库,是基于Arco二开的组件库。发现vue3和2很多写法差距很大了,3更加方便。在这里记录一下

基础组件方法,并暴露出去

之前的写法

function validate(){
  return formRef.value.validate();
}
/** 重置校验 */
function resetFields(){
  return formRef.value.resetFields();
}
function setFields(){
  return formRef.value.setFields();
}
defineExpose({
  validate,
  resetFields,
  setFields
 })

采用Proxy写法 ,可完美继承所有方法。

defineExpose(new Proxy({}, {
  get(_target, prop)  {
    return formRef.value?.[prop]
  },
  has (_target, prop) {
    return prop in formRef.value
  }
}))
posted @ 2024-09-27 09:39  MyKai  阅读(20)  评论(0)    收藏  举报