Penjelasan terperinci fungsi v-model dalam Vue3: aplikasi pengikatan data dua hala

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue, sebagai rangka kerja bahagian hadapan yang popular, juga sentiasa dikemas kini dan diulang. Versi terkini, Vue3, memperkenalkan banyak ciri baharu, menjadikannya lebih mudah dan fleksibel untuk digunakan.

Antaranya, fungsi model v adalah salah satu ciri baharu yang patut disebut dalam Vue3. Ia boleh mencapai pengikatan data dua hala, iaitu, apabila menggunakan fungsi model v, ia bukan sahaja dapat dengan mudah merealisasikan komunikasi antara komponen ibu bapa dan anak, tetapi juga secara automatik mengikat input data oleh pengguna kepada data dalam komponen. Seterusnya, artikel ini akan memberikan penjelasan terperinci tentang fungsi model v dalam Vue3 dan meneroka penggunaannya dalam aplikasi praktikal.

1. Penggunaan asas fungsi v-model

Dalam Vue3, penggunaan asas fungsi v-model tidak banyak berubah daripada Vue2. Untuk teg input biasa, kita boleh menggunakan fungsi model v dalam teg untuk melaksanakan pengikatan data dua hala.

Sebagai contoh, dalam kod berikut:

<template>
  <div>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

Kami mula-mula mentakrifkan data yang dipanggil mesej dalam data. Kemudian kami menggunakan fungsi model v dalam tag input untuk mengikat dua hala data yang dimasukkan oleh pengguna kepada data. Dengan cara ini, apabila pengguna memasukkan data dalam kotak input, data akan disegerakkan secara automatik kepada mesej dalam data. Apabila kami menggunakan mesej, kami juga boleh menyampaikannya terus ke antara muka.

2. Fungsi model v dalam komponen tersuai

Dalam sesetengah kes, kita perlu menggunakan komponen tersuai dan menggunakan model v pada komponen ini. Dalam Vue3, kita boleh melaksanakan fungsi v-model dalam komponen tersuai dengan menambahkan pilihan model pada komponen tersebut.

Sebagai contoh, dalam kod berikut:

<template>
  <div>
    <my-input v-model="message"></my-input>
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      message: "",
    };
  },
};
</script>

Kami menggunakan komponen tersuai input saya dalam templat dan mengikatnya pada mesej dalam data. Kemudian dalam komponen tersuai, kita perlu menambah pilihan model:

<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)" />
</template>

<script>
export default {
  props: ["value"],
};
</script>

Dalam komponen tersuai, kami menentukan nilai sebagai prop komponen dan lulus nilai yang dimasukkan oleh pengguna melalui $emit('update: value ', acara $event.target.value) dikemas kini kepada nilai. Jika kita menggunakan fungsi v-model untuk mengikat komponen tersuai, Vue secara automatik akan menghantar nilai $vnode.model ke dalam komponen sebagai prop, dan akan menggabungkan nilai $emit('update:propName', value) dengan $ Sifat vnode.model.sync terikat. Seterusnya, kami akan menunjukkan kepada anda cara menggunakan fungsi model v dalam komponen tersuai.

<template>
  <div>
    <my-input v-model="message"></my-input>
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      message: "",
    };
  },
};
</script>

Dalam komponen MyInput, kami menambah pilihan model untuk mengemas kini nilai kepada nilai. Nilai nilai ini akan diterima daripada komponen induk apabila komponen dimulakan dan dikemas kini apabila input pengguna berubah.

Apabila kami menggunakan model v dalam komponen induk untuk mengikat komponen tersuai, Vue akan menjana kod secara automatik untuk mengikat komponen kepada data komponen induk.

<my-component v-model="foo"></my-component>

Selepas melakukan ini, kami bukan sahaja boleh membaca dan mengendalikan komponen tersuai dengan mudah dalam komponen induk, tetapi juga mencapai pengikatan dua hala data.

3. Aplikasi model v dalam bentuk

Borang adalah bahagian yang sangat penting dalam pembangunan bahagian hadapan kami. Dalam Vue3, fungsi v-model juga menyediakan kaedah pelaksanaan yang sangat mudah. Kita boleh menggunakan fungsi v-model untuk mengikat data dalam bentuk secara automatik kepada keadaan komponen, dengan itu mencapai operasi borang yang sangat mudah dan cekap.

Sebagai contoh, dalam kod berikut:

<template>
  <div>
    <form>
      <label>名字：</label>
      <input v-model="name" />
      <br />
      <label>年龄：</label>
      <input v-model="age" />
    </form>

    <div>
      <h3>您的名字是：{{ name }}</h3>
      <h3>您的年龄是：{{ age }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
    };
  },
};
</script>

Kita dapat melihat bahawa dalam kod ini, kita menggunakan fungsi model v untuk mengikat teg input dalam borang. Apabila pengguna berjaya memasukkan data dalam kotak input, Vue3 akan menyimpan data secara automatik kepada keadaan komponen dan mengemas kininya. Dan apabila kami memaparkan status komponen dalam antara muka melalui pengikatan kurungan berganda, kami boleh terus membaca data yang disimpan dalam model v.

Ringkasnya, dalam Vue3, fungsi model v bukan sahaja dapat merealisasikan pengikatan data dua hala antara komponen induk dan anak, tetapi juga mengikat data dalam bentuk dengan mudah kepada keadaan komponen, dengan itu mencapai operasi yang cepat, cekap dan mudah. Oleh itu, menggunakan fungsi model-v dalam Vue3 boleh membolehkan kami membangunkan projek bahagian hadapan dengan lebih cekap dan meningkatkan tahap aplikasi kami dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Penjelasan terperinci fungsi v-model dalam Vue3: aplikasi pengikatan data dua hala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!