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

This article brings you relevant knowledge about vue, 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

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-input></el-input>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  }
})
const emits = defineEmits([&#39;update:value&#39;])
// 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
</script>

The encapsulation of the el-select subcomponent baseSelect.vue

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-select>
      <el-option></el-option>
    </el-select>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  },
  placeholder: {
    type: String,
    default: &#39;请选择&#39;
  },
  options: {
    type: Array,
    default() {
      return [{ value: &#39;&#39;, label: &#39;&#39; }]
    }
  },
  // 一下三个属性配合多选使用
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  allowCreate: {
    type: Boolean,
    default: false
  }
})
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
const emits = defineEmits([&#39;update:value&#39;])
</script>

Calls of other components

<baseinput></baseinput>
<baseselect></baseselect>

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

<template>
  <div>
    <el-dialog>
      <div>{{props.title}}</div>
      <slot></slot>
      <template>
        <span>
          <button>取消</button>
          <button>确定</button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  title: {
   type: String,
   default:&#39;&#39;
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits([&#39;update:isShow&#39;])
const handlerCancer = () => {
  emits(&#39;update:isShow&#39;, false)
}
const handlerSubmit = () => {
  // dialog 点击确定按钮之前处理相关业务逻辑
  emits(&#39;update:isShow&#39;, false)
}
const getShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits(&#39;update:isShow&#39;, val)
  }
})
</script>

Others Component call

<basedialog>
   <div>对应的插槽内容</div>
</basedialog>

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!