Adakah data vue mengalir sehala?-Soal Jawab bahagian hadapan-php.cn

adalah sehala. 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.

Adakah data vue mengalir sehala?

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

Vue ialah aliran data sehala dan arah aliran data adalah dari atas ke bawah, daripada komponen induk kepada komponen anak.

Jangan keliru dengan pengikatan data dua hala Vue;

Pemindahan data antara komponen induk dan anak Vue 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 induk data berubah melalui peristiwa.

1. Aliran data sehala:

Semua prop membentuk ikatan sehala ke bawah antara prop ibu bapa dan anak mereka: kemas kini prop induk akan Mengalir turun ke dalam komponen kanak-kanak, tetapi bukan sebaliknya. Ini akan menghalang komponen anak daripada menukar keadaan komponen induk secara tidak sengaja, menjadikan aliran data aplikasi anda sukar difahami.

Selain itu, setiap kali komponen induk bertukar, semua prop dalam komponen anak akan dimuat semula kepada nilai terkini. Ini bermakna anda tidak boleh menukar prop dalam komponen kanak-kanak. Jika anda melakukan ini, ia juga akan mengubah keadaan komponen induk.

2. Prop dihantar masuk melalui rujukan:

Perhatikan bahawa dalam objek dan tatasusunan JavaScript dihantar melalui rujukan, jadi untuk tatasusunan atau jenis objek Untuk prop, menukar objek atau tatasusunan itu sendiri dalam komponen anak akan mempengaruhi keadaan komponen induk.

Pemahaman mendalam tentang aliran data sehala Vue

1 model v digunakan pada elemen input

v-model Ia sangat serupa dengan pengikatan dua hala apabila digunakan (sebenarnya...), tetapi Vue ialah aliran data tunggal dan model v hanyalah gula sintaksis:

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

Salin selepas log masuk

Yang pertama baris kod sebenarnya hanyalah gula sintaktik untuk baris kedua. Kemudian baris kedua kod boleh dipendekkan seperti ini:

<input :value="something" @input="something = $event.target.value" />

Salin selepas log masuk

Untuk memahami baris kod ini, mula-mula anda perlu tahu bahawa elemen input itu sendiri mempunyai acara oninput Ini adalah tambahan baharu kepada HTML5 , serupa dengan onchange Apabila kandungan kotak input berubah, oninput akan dicetuskan dan nilai terkini akan dihantar kepada sesuatu melalui $event.

Jika kita perhatikan dengan teliti dua baris kod gula sintaksis dan sintaks asal, kita boleh membuat kesimpulan: Apabila menambah atribut model-v pada elemen input, nilai akan digunakan sebagai atribut elemen secara lalai, dan kemudian Peristiwa 'input' digunakan sebagai peristiwa pencetus untuk pemindahan nilai masa nyata

v-model digunakan pada komponen

v-model bukan sahaja boleh digunakan pada input Ia juga boleh digunakan pada komponen Sila lihat demo di laman web rasmi.

<currency-input v-model="price"></currency-input>
Vue.component(&#39;currency-input&#39;, {
  template: &#39;\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  &#39;,
  props: [&#39;value&#39;], // 为什么这里要用 value 属性，value在哪里定义的？
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexOf(&#39;.&#39;) === -1
            ? value.length
            : value.indexOf(&#39;.&#39;) + 3
        )
      // 如果值尚不合规，则手动覆盖为合规的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件带出数值
      // <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
      this.$emit(&#39;input&#39;, Number(formattedValue))
    }
  }
})

Salin selepas log masuk

Jika anda tahu jawapan kepada dua soalan ini, tahniah kerana benar-benar menguasai v-model Jika anda tidak faham, anda boleh lihat kod ini:

<currency-input v-model="price"></currency-input>
所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

Salin selepas log masuk

Jadi, apabila menambahkan atribut model-v pada komponen, nilai tersebut akan digunakan sebagai atribut komponen secara lalai, dan nilai 'input' akan digunakan sebagai nama acara apabila mengikat acara pada komponen. Ini amat berguna apabila menulis komponen.

3. Kelemahan dan penyelesaian v-model

v-model tidak mudah digunakan semasa membuat komponen biasa seperti kotak semak atau butang radio.

<input type="checkbox" v-model="something" />

Salin selepas log masuk

v-model memberikan kita atribut nilai dan peristiwa oninput Walau bagaimanapun, apa yang kita perlukan bukanlah atribut nilai, tetapi atribut yang diperiksa, dan ia tidak akan dicetuskan apabila anda mengklik butang radio ini. . acara onput, ia hanya akan mencetuskan acara onchange.

Oleh kerana model v hanya digunakan pada elemen input, situasi ini mudah untuk diselesaikan:

<input type="checkbox" :checked="value" @change="change(value, $event)"

Salin selepas log masuk

Apabila model v digunakan pada komponen:

<checkbox v-model="value"></checkbox>

Vue.component(&#39;checkbox&#39;, {
  tempalte: &#39;<input type="checkbox" @change="change" :checked="currentValue"/>&#39;
  props: [&#39;value&#39;],
  data: function () {
        return {
            //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
            currentValue: this.value
        };
    },
  methods: {
    change: function ($event) {
      this.currentValue = $event.target.checked;
      this.$emit(&#39;input&#39;, this.currentValue);  
    }
})

Salin selepas log masuk

Dalam Vue versi 2.2, anda boleh menyesuaikan prop/acara melalui pilihan model apabila menentukan komponen.

4. Aliran data komponen Vue

Dari analisis model v di atas, kita dapat memahami bahawa pengikatan data dua hala adalah berdasarkan pengikatan sehala. Peristiwa perubahan(input) ditambahkan pada elemen input (input, textare, dll.) untuk mengubah suai model dan paparan secara dinamik, iaitu, dengan mencetuskan ($emit) peristiwa komponen induk untuk mengubah suai mv untuk mencapai kesan daripada mvvm. Pemindahan data antara komponen Vue adalah sehala, iaitu, data sentiasa dihantar daripada komponen induk kepada komponen anak Komponen anak boleh mempunyai data sendiri yang diselenggara secara dalaman, tetapi ia tidak mempunyai hak untuk mengubah suai data dihantar kepadanya oleh komponen induk Semasa membangunkan Apabila pengarang cuba melakukan ini, vue akan melaporkan ralat. Ini dilakukan untuk penyahgandingan yang lebih baik antara komponen Semasa pembangunan, mungkin terdapat berbilang subkomponen yang bergantung pada data tertentu komponen induk Jika subkomponen boleh mengubah suai data komponen induk, perubahan dalam subkomponen akan mencetuskan semua data yang bergantung pada data ini Komponen anak berubah, jadi Vue tidak mengesyorkan bahawa komponen anak mengubah suai data komponen induk Mengubah suai prop akan memberikan amaran. Carta alir adalah seperti berikut:

Adakah data vue mengalir sehala?