Adakah vue aliran data tunggal atau aliran data dua arah?

vue ialah satu aliran data. Walaupun Vue mempunyai "model v" yang mengikat dua hala, pemindahan data antara komponen induk dan anak Vue masih mengikut aliran data sehala Komponen induk boleh menghantar prop kepada komponen anak, tetapi komponen anak tidak boleh mengubah suai prop yang diluluskan oleh komponen induk , komponen anak hanya boleh memberitahu komponen induk tentang perubahan data melalui peristiwa.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Pengikatan dua hala

Ringkasnya, pengikatan dua hala bermakna kemas kini model akan mencetuskan kemas kini paparan dan kemas kini paparan akan mencetuskan kemas kini model. Kesannya adalah saling
[Muat naik imej gagal...(image-81a06f-1556975918443)]

Aliran data sehala

Ringkasnya, tunggal Aliran data bermakna kemas kini model akan mencetuskan kemas kini paparan dan kemas kini paparan tidak akan mencetuskan kemas kini model Fungsinya adalah sehala

Bukankah ini mengarut?

Prinsip pelaksanaan model v

<ul>
<li>Vue是单向数据流，不是双向绑定</li>
<li>Vue的双向绑定不过是语法糖</li>
<li>Object.definePropert是用来做响应式更新的</li>
</ul>

Letakkan pada komponen

Komponen induk

• Komponen anak

Kaedah penulisan komponen induk adalah bersamaan dengan

  <AnalysisSub v-model="phoneInfo" :zip-code.sync="zipCode" /

Letakkan pada elemen input

<template>
  <div>
    <input
      :value="phoneInfo.phone"
      type="number"
      placeholder="手机号"
      @input="handlePhoneChange"
    />
    <input
      :value="zipCode"
      type="number"
      placeholder="邮编"
      @input="handleZipCodeChange"
    />
  </div></template><script>export default {
  name: "PersonalInfo",
  model: {
    prop: "phoneInfo", // 默认 value
    event: "change" // 默认 input
  },
  props: {
    phoneInfo: Object,
    zipCode: String
  },
  methods: {
    handlePhoneChange(e) {
      this.$emit("change", {
        ...this.phoneInfo,
        phone: e.target.value
      });
    },
    handleZipCodeChange(e) {
      this.$emit("update:zipCode", e.target.value);
    }
  }
};</script>

Malah, perkara di atas mempunyai mencerminkan bahawa

 <AnalysisSub :phone-info="phoneInfo" @change="val => (phoneInfo = val)"
    :zip-code="zipCode"  @update:zipCode="val => (zipCode = val)"/>

• Dua ayat di atas adalah sama

PETUA

model 2.2.0

<input v-model=“phoneInfo.phone”/>
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"

Membenarkan komponen tersuai untuk menyesuaikan prop dan peristiwa apabila menggunakan v-model. Secara lalai, model v pada komponen akan menggunakan nilai sebagai prop dan input sebagai peristiwa, tetapi beberapa jenis input seperti butang radio dan butang kotak semak mungkin mahu menggunakan prop nilai untuk tujuan yang berbeza. Gunakan pilihan model untuk mengelakkan konflik dalam situasi ini.

.sync Modifier 2.3.0

Dalam sesetengah kes, kita mungkin perlu melakukan "pengikatan dua hala" pada prop. Malangnya, pengikatan dua hala yang benar menimbulkan masalah penyelenggaraan kerana komponen anak boleh mengubah suai komponen induknya tanpa sumber perubahan yang jelas dalam komponen induk atau anak.

Ringkasan

Jadi,

vue masih aliran data sehala

, v-model hanyalah gula sintaksis, ia adalah

dan . Kami biasanya ditanya semasa temu bual cara Vue melaksanakan kemas kini data responsif Jawapan yang dijangkakan oleh penemuduga adalah untuk melaksanakan kemas kini responsif melalui kaedah

dan

. pengubah suai model-v dan .sync digunakan masing-masing apabila atribut tunggal komponen atau berbilang atribut memerlukan pengikatan dua hala Ini adalah senario di mana kedua-duanya digunakan :value="sth"@change="val => sth = val"Syor yang berkaitan: " Object.defineProperty() tutorial vue.jsget》set

Atas ialah kandungan terperinci Adakah vue aliran data tunggal atau aliran data dua arah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!