實例詳解vue基于element

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

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

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

具體實現(xiàn)思路如下：

表單的label和對應(yīng)的選擇器、輸入框

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

template

div>

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

template

div>

其他組件的調(diào)用

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

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

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

基礎(chǔ)的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點擊確定按鈕之前處理相關(guān)業(yè)務(wù)邏輯

emits(update:isShow,false)

constgetShow=computed({

get:()=props.isShow,

set:(val)={

emits(update:isShow,val)

/script

其他組件的調(diào)用

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

div對應(yīng)的插槽內(nèi)容/div

/BaseDialog

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