Detailed example of vue's secondary encapsulation of components based on element-plus

This article brings you relevant knowledge aboutvue, which mainly introduces the relevant content about the two-way binding of vue3 component secondary encapsulation data based on element-plus. In actual development , we often need to encapsulate some of our own customized components based on element-plus to facilitate the rapid construction of our current business. Let's take a look at it together. I hope it will be helpful to everyone.

[Related recommendations:javascript video tutorial,vue.js tutorial】

Based on element-plus Two-way binding of secondary encapsulated data

In actual development, we often need to encapsulate some of our own customized components based on element-plus to facilitate the rapid construction of our current business. In vue2.0, the two-way binding of parent-child component data is usually done by passing the value in props: value.sync, and using it in the child component, this.$emit("update:value", value), then we How to implement similar two-way binding of parent-child components in vue3?

In vue2, the responsiveness of data is two-way binding of data based on the Object.defineProperty object. This hijacking publish-subscribe mode cannot detect complex types of data such as objects and arrays very well. The responsiveness of vue3 data is based on the set and get methods of proxy. Compared with the hijacking of Object.defineProperty, the proxy method is more elegant.

The specific implementation ideas are as follows:

The label of the form and the corresponding selector and input box

Effect preview

The encapsulation of the el-input subcomponent baseInput.vue

The encapsulation of the el-select subcomponent baseSelect.vue

Calls of other components

Instructions

Using the computed set and get methods, you can With the two-way binding of parent and child components, you no longer have to worry about the fact that child components cannot modify the props of the parent component. The general implementation idea of other element components is the same.

Basic dialog pop-up box

Encapsulation of el-dialog subcomponent baseDialog.vue

Others Component call

 
对应的插槽内容
 

Notes

The default props name of v-model two-way binding is value. The binding like dialog is isShow. You need to declare the two-way binding after v-model. The specified props parameter name is v-model:isShow. Input boxes such as input and select are bound to value by default, so they can be ignored. If you bind other values (that is, other parameter values other than value), you need v-model:isShow statement

[Related recommendations:javascript video tutorial,vue. js tutorial】

The above is the detailed content of Detailed example of vue's secondary encapsulation of components based on element-plus. For more information, please follow other related articles on the PHP Chinese website!