第實例詳解vue基于element基于element-plus的二次封裝數據雙向綁定

在實際開發(fā)中，經常需要基于element-plus封裝一些自己的定制化組件，方便快速構建我們當前的業(yè)務。在vue2.0中父子組件數據的雙向綁定通常都是通過在props中傳值:value.sync，在子組件中使用，this.$emit(update:value,value)的方式，那么我們怎樣在vue3中實現類似的父子組件的雙向綁定呢？

在vue2中，數據的響應式是基于Object.defineProperty對象進行數據的雙向綁定，這種劫持+發(fā)布訂閱的模式并不能很好的檢測對象、數組等復雜類型的數據。在vue3的數據的響應式是基于proxy的set、get方法，相對于Object.defineProperty的劫持，proxy代理的方式更為優(yōu)雅。

具體實現思路如下：

表單的label和對應的選擇器、輸入框

el-input子組件的封裝baseInput.vue

template

div>

el-select子組件的封裝baseSelect.vue

template

div>

其他組件的調用

BaseInputblockName=傳入的label名稱v-model:value=雙向綁定的數據/

BaseSelectblockName=傳入的label名稱:options=選擇器的選項值v-model:value=雙向綁定的數據/

利用computed的set，get方法，你可以進行父子組件的雙向綁定，再也不用擔心，子組件無法修改父組件的props而煩惱，其他的element的組件，大致實現思路都是如此。

基礎的dialog彈框

el-dialog子組件的封裝baseDialog.vue

template

div

el-dialogv-model=getShowwidth=65%:before-close=handlerCancer

div{{props.title}}/div

slot/

template#footer

span

button@click=handlerCancer取消/button

button@click=handlerSubmit確定/button

/span

/template

/el-dialog

/div

/template

scriptsetup

import{computed}fromvue

constprops=defineProps({

title:{

type:String,

default:

isShow:{

type:Boolean,

default:false

constemits=defineEmits([update:isShow])

consthandlerCancer=()={

emits(update:isShow,false)

consthandlerSubmit=()={

//dialog點擊確定按鈕之前處理相關業(yè)務邏輯

emits(update:isShow,false)

constgetShow=computed({

get:()=props.isShow,

set:(val)={

emits(update:isShow,val)

/script

其他組件的調用

BaseDialogtitle=傳入的標題名稱v-model:isShow=isShow

div對應的插槽內容/div

/BaseDialog

v-model雙向綁定默認的props名稱為value，像dialog這種綁定的是isShow，需要在v-model后面聲明雙向綁定的props參數名稱v-mo