Bagaimana untuk merangkum komponen sendiri dalam vue

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna yang moden dan boleh digubah. Asas Vue ialah seni bina komponen Komponen ialah blok kod yang boleh digunakan semula Rangka kerja Vue menjadikannya mudah untuk menguraikan halaman kepada berbilang komponen. Selain itu, Vue juga membenarkan pembangun menyesuaikan komponen terkapsul untuk memenuhi keperluan perniagaan tertentu. Artikel ini akan memperkenalkan cara merangkum komponen anda sendiri dalam Vue supaya ia boleh digunakan secara meluas oleh pembangun atau projek lain.

Analisis Keperluan

Sebelum komponen pembungkusan, keperluan perlu dianalisis. Artikel ini mengambil komponen pengesahan borang sebagai contoh untuk menggambarkan Keperluan adalah seperti berikut:

1. Sahkan kesahihan format nombor telefon mudah alih, alamat e-mel dan kata laluan.
2. Sediakan gaya yang berbeza untuk hasil pengesahan.
3. memberikan mesej ralat.

Mengikut keperluan ini, kami perlu menulis komponen Vue untuk melaksanakan pengesahan borang.

Pengkapsulan Komponen

Seterusnya, kami akan menunjukkan cara merangkum komponen tersuai dalam Vue.

Buat komponen

Pertama, kita perlu mencipta komponen. Dalam Vue, komponen dicipta menggunakan fungsi Vue.component(). Fungsi ini mengambil dua parameter: nama komponen dan objek pilihan komponen. Berikut ialah contoh mudah:

Vue.component('validation-form', {
  // 组件选项
})

Dalam contoh ini, kami mentakrifkan komponen bernama validation-form yang merupakan objek pilihan yang memanjangkan kefungsian komponen Vue.

Templat

Seterusnya, kita perlu menentukan templat komponen. Templat ialah blok kod HTML yang memaparkan kandungan komponen. Dalam objek pilihan komponen, templat boleh ditakrifkan melalui pilihan templat. Berikut ialah contoh mudah:

Vue.component('validation-form', {
  template: '<div>表单验证组件</div>'
})

Dalam contoh ini, kami mentakrifkan templat yang mengandungi hanya elemen HTML ringkas <div>. <h3 id="Sifat">Sifat </h3> <p>Seterusnya, kita perlu menentukan sifat komponen. Sifat ialah sejenis data yang membenarkan pemindahan daripada komponen induk kepada komponen anak. Dalam objek pilihan komponen, sifat boleh ditakrifkan melalui pilihan prop. Berikut ialah contoh: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Vue.component('validation-form', {   props: [     'email',     'password',     'phone'   ],   template: `     &lt;div&gt;       &lt;div&gt;电子邮件地址：{{ email }}&lt;/div&gt;       &lt;div&gt;密码：{{ password }}&lt;/div&gt;       &lt;div&gt;电话：{{ phone }}&lt;/div&gt;     &lt;/div&gt;   ` })</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Dalam contoh ini, kami mentakrifkan tiga sifat: <code>email, password dan phone. Dalam templat, kami merujuk kepada nilai atribut melalui pendakap kerinting berganda sintaks khas {{ }}.

Acara

Seterusnya, kita perlu menentukan acara untuk komponen tersebut. Peristiwa ialah tindakan yang dicetuskan oleh komponen untuk menghantar semula data kepada komponen induk. Dalam objek pilihan komponen, peristiwa boleh ditakrifkan melalui fungsi $emit(). Berikut ialah contoh:

Vue.component('validation-form', {
  props: [
    'email',
    'password',
    'phone'
  ],
  template: `
    <div>
      <input>
      <input>
      <input>
    </div>
  `
})

Dalam contoh ini, kami menggunakan arahan model-v untuk mengikat data dengan elemen bentuk. Apabila nilai elemen borang berubah, kami menggunakan fungsi $emit() untuk mencetuskan acara tersuai dan menggunakan awalan change- pada nama acara untuk menghantar data seperti yang diperlukan.

Pelaksanaan konkrit

Dengan pemahaman konsep asas di atas, anda boleh melaksanakan komponen mengikut keperluan anda. Kami akan melaksanakan komponen pengesahan borang dengan fungsi berikut:

1. Sahkan format alamat e-mel dan nombor telefon mudah alih, dan kesahihan kata laluan.
2. Sediakan gaya yang berbeza dan berikan mesej ralat berdasarkan hasil pengesahan.

Pertama, kita perlu menentukan templat dan sifat komponen:

Vue.component('validation-form', {
  props: [
    'email',
    'password',
    'phone'
  ],
  data() {
    return {
      // 绑定表单元素的值
      emailValue: this.email,
      passwordValue: this.password,
      phoneValue: this.phone,
      // 不同的样式，根据表单验证结果决定
      emailClass: '',
      passwordClass: '',
      phoneClass: '',
      // 错误信息
      emailError: '',
      passwordError: '',
      phoneError: ''
    }
  },
  methods: {
    // 验证电子邮件地址的函数
    validateEmail: function () {
      const regex = /^([\w\-\.]+)@([\w\-\.]+)\.(\w+)$/;
      if (regex.test(this.emailValue)) {
        this.emailClass = 'is-success';
        this.emailError = '';
      } else if (this.emailValue.length === 0) {
        this.emailClass = '';
        this.emailError = '';
      } else {
        this.emailClass = 'is-danger';
        this.emailError = '电子邮件地址格式错误!';
      }
    },
    // 验证密码的函数
    validatePassword: function () {
      const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
      if (regex.test(this.passwordValue)) {
        this.passwordClass = 'is-success';
        this.passwordError = '';
      } else if (this.passwordValue.length === 0) {
        this.passwordClass = '';
        this.passwordError = '';
      } else {
        this.passwordClass = 'is-danger';
        this.passwordError = '密码至少8个字符，包括字母和数字!';
      }
    },
    // 验证手机号码的函数
    validatePhone: function () {
      const regex = /^1[3456789]\d{9}$/;
      if (regex.test(this.phoneValue)) {
        this.phoneClass = 'is-success';
        this.phoneError = '';
      } else if (this.phoneValue.length === 0) {
        this.phoneClass = '';
        this.phoneError = '';
      } else {
        this.phoneClass = 'is-danger';
        this.phoneError = '手机号格式错误!';
      }
    }
  },
  template: `
    <div>
      <div>
        <label>电子邮件地址</label>
        <div>
          <input>
        </div>
        <p>{{ emailError }}</p>
      </div>

      <div>
        <label>密码</label>
        <div>
          <input>
        </div>
        <p>{{ passwordError }}</p>
      </div>

      <div>
        <label>手机号码</label>
        <div>
          <input>
        </div>
        <p>{{ phoneError }}</p>
      </div>
    </div>
  `
})

Dalam kod di atas, kita mentakrifkan komponen dengan tiga sifat, iaitu email , password dan phone, atribut ini akan diikat oleh model V kepada elemen bentuk masing-masing. Dalam objek pilihan komponen, kami mentakrifkan atribut berikut:

1. emailValue, passwordValue, phoneValue: nilai yang digunakan untuk mengikat elemen bentuk.
2. emailClass, passwordClass, phoneClass: digunakan untuk mengikat gaya berbeza, ditentukan berdasarkan hasil pengesahan borang.
3. emailError, passwordError, phoneError: digunakan untuk menyediakan pengikatan untuk mesej ralat.

Kami juga telah mentakrifkan tiga fungsi yang ditentukan pengguna untuk mengesahkan kesahihan alamat e-mel, kata laluan dan nombor telefon mudah alih serta menetapkan gaya dan mesej ralat yang berbeza berdasarkan hasil pengesahan.

Dalam templat, kami menggunakan arahan model-V untuk mengikat data untuk membentuk elemen dan menggunakan atribut :class untuk mengikat elemen borang dengan gaya berbeza mengikut keperluan. Apabila nilai elemen borang berubah, kami menggunakan acara @blur untuk mencetuskan acara tersuai yang mengesahkan pengguna, menghantar data dan nama acara.

Menggunakan Komponen

Sekarang kami telah berjaya merangkum komponen Vue kami sendiri, kami boleh menggunakannya dalam aplikasi Vue yang lain. Bagaimana untuk memanggil komponen ini? Hanya gunakan teg <validation-form></validation-form> dalam aplikasi Vue anda untuk memaparkan komponen anda dan menghantar sifat yang diperlukan kepada komponen.

<validation-form></validation-form>

Dalam kod di atas, kami menghantar sifat yang terikat pada komponen kepada komponen. Paparan akan memaparkan kotak input dan statusnya, serta mesej ralat, seperti yang ditunjukkan dalam imej di bawah.

Kesimpulan

Vue ialah rangka kerja JavaScript yang mudah digunakan, fleksibel dan berkuasa serta sesuai untuk membina pelbagai jenis aplikasi dan komponen. Komponen tersuai boleh membantu pembangun menyusun dan menggunakan semula kod dengan lebih baik, serta membantu meningkatkan kebolehselenggaraan dan kebolehskalaan kod. Dalam artikel ini, kami mempelajari cara membuat komponen tersuai dalam Vue dan cara menggunakan konsep asas seperti sifat, acara, gaya, dsb. dalam komponen. Kami juga menggunakan pengesahan borang komponen contoh untuk menunjukkan cara melaksanakan komponen Vue yang lengkap. Kami berharap artikel ini telah membantu anda dan membolehkan anda memahami dengan lebih baik ciri dan penggunaan komponen Vue, supaya anda boleh menggunakannya dengan lebih baik untuk membina aplikasi web.

Atas ialah kandungan terperinci Bagaimana untuk merangkum komponen sendiri dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!