更好的封裝Vue3元件

MyKai發表於2024-09-27
封裝Vue元件

最近在寫公司的元件庫，是基於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
  }
}))

相關文章