实例详解vue基于element

第实例详解vue基于element基于element-plus的二次封装数据双向绑定

在实际开发中，经常需要基于element-plus封装一些自己的定制化组件，方便快速构建我们当前的业务。在vue2.0中父子组件数据的双向绑定通常都是通过在props中传值:value.sync，在子组件中使用，this.$emit(update:value,value)的方式，那么我们怎样在vue3中实现类似的父子组件的双向绑定呢？

在vue2中，数据的响应式是基于Object.defineProperty对象进行数据的双向绑定，这种劫持+发布订阅的模式并不能很好的检测对象、数组等复杂类型的数据。在vue3的数据的响应式是基于proxy的set、get方法，相对于Object.defineProperty的劫持，proxy代理的方式更为优雅。

具体实现思路如下：

表单的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点击确定按钮之前处理相关业务逻辑

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