Apakah kaedah untuk melaksanakan pengikatan dua hala dalam Vue?

Vue melaksanakan pengikatan dua hala: 1. Gunakan arahan model-v untuk melaksanakan pengikatan Model-v pada komponen tersuai adalah bersamaan dengan menghantar prop modelValue dan menerima peristiwa modelValue yang dilemparkan , gunakan pemalam vue-better-sync untuk melaksanakan pengikatan 3. Gunakan pengubah suai v-bind.sync, sintaksnya ialah "".

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Beberapa cara untuk melaksanakan pengikatan dua hala dalam Vue

1 arahan model v

<childcomponent></childcomponent>

<!-- 是以下的简写: -->

<childcomponent></childcomponent>

Jika anda mahu Untuk menukar harta atau nama acara kepada nama lain, anda perlu menambah pilihan model dalam komponen ChildComponent:

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

Jadi, dalam contoh v-model ini ialah singkatan daripada:

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

Dalam Vue 3.x, v-model pada komponen tersuai adalah bersamaan dengan lulus modelValue prop dan menerima acara update:modelValue yang dilemparkan:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Vue3 boleh mengikat berbilang v-model, contohnya: <ChildComponent v-model:title="pageTitle" v-model:name="pageName" />

2 diperlukan : Bangunkan komponen Prompt yang memerlukan input pengguna yang disegerakkan dan klik butang untuk menutup tetingkap pop timbul.

Secara amnya kita akan melakukan ini:

Tidak mengapa untuk menulis satu atau dua komponen Setelah saiz komponen diperbesarkan, tulis dua -cara mengikat benar-benar boleh menyebabkan masalah. Jadi, untuk membebaskan produktiviti, kami mempunyai roda vue-better-sync, dan mari lihat cara menggunakannya untuk mengubah komponen Prompt kami:

<template>
  <div v-show="_visible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="_answer" />
    </div>
    <div>
      <button @click="_visible = !_visible">确认</button>
      <button @click="_visible = !_visible">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: &#39;prompt&#39;,
  
  props: {
    answer: String,
    visible: Boolean
  },
  
  computed: {
    _answer: {
      get() {
        return this.answer
      },
      set(value) {
        this.$emit(&#39;input&#39;, value)
      }
    },
    _visible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit(&#39;update:visible&#39;, value)
      }
    }
  }
}
</script>

vue-better-sync menyatukan v-model dan .sync delivery Dalam bentuk data, anda hanya perlu menggunakan this.actual${PropName} = newValue atau this.sync${PropName}(newValue) untuk menghantar data baharu kepada komponen induk.

<template>
  <div v-show="actualVisible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="actualAnswer" />
    </div>
    <div>
      <button @click="syncVisible(!actualVisible)">确认</button>
      <button @click="syncVisible(!actualVisible)">取消</button>
    </div>
  </div>
</template>

<script>
import VueBetterSync from &#39;vue-better-sync&#39;

export default {
  name: &#39;prompt&#39;,
  
  mixins: [
    VueBetterSync({
      prop: &#39;answer&#39;, // 设置 v-model 的 prop
      event: &#39;input&#39; // 设置 v-model 的 event
    })
  ],
  
  props: {
    answer: String,
    visible: {
      type: Boolean,
      sync: true // visible 属性可用 .sync 双向绑定
    }
  }
}
</script>

GitHub:

fjc0k/vue-better-sync

3 Gunakan pengubah v-bind.sync

dalam In sesetengah kes, kita mungkin perlu melakukan "pengikatan dua hala" pada

tertentu (kecuali untuk kes sebelumnya menggunakan model v untuk mengikat prop). Untuk ini, kami mengesyorkan menggunakan acara lontaran

. Contohnya, untuk ChildComponent dengan prop tajuk dalam contoh sebelumnya, kita boleh menyampaikan niat untuk memberikan nilai baharu kepada ibu bapa melalui: propupdate:myPropName

Ibu bapa boleh mendengarnya jika perlu acara dan mengemas kini sifat data tempatan. Contohnya:

this.$emit('update:title', newValue)

Untuk kemudahan, kita boleh menggunakan pengubah suai .sync untuk menyingkatkannya seperti berikut:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

<ChildComponent :title.sync="pageTitle" />

vue3 mengalih keluar

.sync

[Cadangan berkaitan:

tutorial video vuejs

, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah kaedah untuk melaksanakan pengikatan dua hala dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!