十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本文小编为大家详细介绍“vue基于element-plus的组件二次封装怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue基于element-plus的组件二次封装怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
成都创新互联是一家专业提供泰州企业网站建设,专注与成都网站建设、成都网站制作、html5、小程序制作等业务。10年已为泰州众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
在实际开发中,经常需要基于element-plus封装一些自己的定制化组件,方便快速构建我们当前的业务。在vue2.0中父子组件数据的双向绑定通常都是通过在props中传值:value.sync,在子组件中使用,this.$emit(“update:value”, value)的方式,那么我们怎样在vue3中实现类似的父子组件的双向绑定呢?
在vue2中,数据的响应式是基于Object.defineProperty对象进行数据的双向绑定,这种劫持+发布订阅的模式并不能很好的检测对象、数组等复杂类型的数据。在vue3的数据的响应式是基于proxy的set、get方法,相对于Object.defineProperty的劫持,proxy代理的方式更为优雅。
具体实现思路如下:
{{ props.blockName }}
{{ props.blockName }}
利用computed的set,get方法,你可以进行父子组件的双向绑定,再也不用担心,子组件无法修改父组件的props而烦恼,其他的element的组件,大致实现思路都是如此。
{{props.title}}
对应的插槽内容
v-model双向绑定默认的props名称为value,像dialog这种绑定的是isShow,需要在v-model后面声明双向绑定的props参数名称v-model:isShow,像input,select这种输入框绑定默认为value,所以可以忽略不写。若你绑定其他值(即除了value以外的其他参数值),则需要v-model:isShow声明
读到这里,这篇“vue基于element-plus的组件二次封装怎么实现”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注创新互联行业资讯频道。