本篇文章给大家带来了关于vue的相关知识,其中主要介绍了关于vue3基于element-plus的组件二次封装数据双向绑定的相关内容,在实际开发中,经常需要基于element-plus封装一些自己的定制化组件,方便快速构建我们当前的业务,下面一起来看一下,希望对大家有帮助。

【相关推荐:javascript视频教程、vue.js教程】
基于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
{{ props.blockName }}
el-select子组件的封装 baseSelect.vue
{{ props.blockName }}
其他组件的调用
说明
利用computed的set,get方法,你可以进行父子组件的双向绑定,再也不用担心,子组件无法修改父组件的props而烦恼,其他的element的组件,大致实现思路都是如此。
基础的dialog弹框

el-dialog子组件的封装 baseDialog.vue
{{props.title}}
其他组件的调用
对应的插槽内容
注意事项
v-model双向绑定默认的props名称为value,像dialog这种绑定的是isShow,需要在v-model后面声明双向绑定的props参数名称v-model:isShow,像input,select这种输入框绑定默认为value,所以可以忽略不写。若你绑定其他值(即除了value以外的其他参数值),则需要v-model:isShow声明
【相关推荐:javascript视频教程、vue.js教程】










