Exemple détaillé de l'encapsulation secondaire des composants de vue basée sur element-plus

Cet article vous apporte des connaissances pertinentes sur vue, qui présente principalement le contenu pertinent sur la liaison bidirectionnelle des données d'encapsulation secondaire du composant vue3 basée sur element-plus. Dans le développement réel, il est souvent nécessaire d'utiliser element-plus plus. encapsule certains de ses propres composants personnalisés pour faciliter la construction rapide de notre entreprise actuelle. Jetons-y un coup d'œil, j'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js】

Liaison bidirectionnelle des données d'encapsulation secondaire basée sur element-plus

Dans le développement réel, un packaging element-plus est souvent nécessaire. Certains de nos propres composants personnalisés pour développer rapidement notre activité actuelle. Dans vue2.0, la liaison bidirectionnelle des données du composant parent-enfant est généralement effectuée en transmettant la valeur dans props : value.sync, et en l'utilisant dans le composant enfant, this.$emit("update:value", value ), puis nous Comment implémenter une liaison bidirectionnelle similaire de composants parent-enfant dans vue3 ?

Dans vue2, la réactivité des données est une liaison bidirectionnelle des données basée sur l'objet Object.defineProperty. Ce modèle de détournement + publication et abonnement ne peut pas très bien détecter les types de données complexes tels que les objets et les tableaux. La réactivité des données vue3 est basée sur les méthodes set et get du proxy. Par rapport au détournement d'Object.defineProperty, la méthode proxy est plus élégante.

Les idées spécifiques d'implémentation sont les suivantes :

L'étiquette du formulaire et le sélecteur et la zone de saisie correspondants

Aperçu de l'effet

el-input sub-component encapsulation 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>

el -Sélectionnez la base d'encapsulation du composant enfantSelect.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>

Appel à d'autres composants

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

Instructions

En utilisant l'ensemble calculé et les méthodes get, vous pouvez effectuer une liaison bidirectionnelle des composants parent et enfant , je n'ai plus besoin de m'inquiéter, je suis troublé par le fait que les composants enfants ne peuvent pas modifier les accessoires du composant parent. L'idée générale d'implémentation des autres composants d'élément est la même. Boîte de dialogue contextuelle de base value , la liaison comme la boîte de dialogue est isShow, vous devez déclarer le nom du paramètre d'accessoires de liaison bidirectionnelle v-model:isShow après v-model, la liaison des zones de saisie telles que l'entrée et sélectionner les valeurs par défaut à la valeur, afin que vous puissiez l'ignorer et le faire pas l'écrire. Si vous liez d'autres valeurs (c'est-à-dire des valeurs de paramètres autres que la valeur), vous avez besoin de la déclaration v-model:isShow

[Recommandations associées :

, Tutoriel vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!