Contoh terperinci pengkapsulan sekunder vue bagi komponen berdasarkan unsur-tambah

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue, yang terutamanya memperkenalkan kandungan yang berkaitan tentang pengikatan dua hala data pengkapsulan sekunder komponen vue3 berdasarkan elemen-tambah Dalam pembangunan sebenar, kita sering perlu melakukannya merangkum beberapa komponen tersuai kami berdasarkan unsur-tambah untuk memudahkan pembinaan pesat perniagaan semasa kami. Saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Berdasarkan elemen- ditambah pengikatan dua hala data terkapsul sekunder

Dalam pembangunan sebenar, kami selalunya perlu merangkum beberapa komponen tersuai kami sendiri berdasarkan unsur-tambah untuk memudahkan pembinaan pesat perniagaan semasa kami. Dalam vue2.0, pengikatan dua hala data komponen induk-anak biasanya dilakukan dengan menghantar nilai dalam props: value.sync, dan menggunakannya dalam komponen anak, this.$emit("update:value", value ), maka kita Bagaimana untuk melaksanakan pengikatan dua hala yang serupa bagi komponen ibu bapa-anak dalam vue3?

Dalam vue2, responsif data ialah pengikatan data dua hala berdasarkan objek Object.defineProperty Mod publish-subscribe rampasan ini tidak dapat mengesan jenis data yang kompleks seperti objek dan tatasusunan dengan baik. Responsif data vue3 adalah berdasarkan kaedah proksi set dan dapatkan Berbanding dengan rampasan Object.defineProperty, kaedah proksi adalah lebih elegan.

Idea pelaksanaan khusus adalah seperti berikut:

Label borang dan kotak pemilih dan input yang sepadan

Pratonton kesanGunakan set yang dikira, dapatkan kaedah, anda boleh melakukan pengikatan dua hala komponen induk dan anak Anda tidak perlu lagi bimbang tentang fakta bahawa komponen anak tidak boleh mengubah suai prop komponen induk komponen elemen adalah sama.

Encapsulation of el-dialog subcomponent baseDialog.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>

Panggilan ke komponen lain

<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>

Nama prop lalai untuk pengikatan dua hala model v ialah nilai Binding seperti dialog ialah isShow, yang perlu dalam v-. model Nama parameter props v-model:isShow untuk pengikatan dua hala diisytiharkan kemudiannya. Jika anda mengikat nilai lain (iaitu, nilai parameter lain selain nilai), anda memerlukan v-model:isShow pengisytiharan

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

, tutorial js】

Atas ialah kandungan terperinci Contoh terperinci pengkapsulan sekunder vue bagi komponen berdasarkan unsur-tambah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!