Dapatkan pemahaman yang mendalam tentang tiga API dalam komponen vue: prop, slot dan acara

Tidak kira betapa kompleksnya komponen itu, ia mesti terdiri daripada prop, acara dan slot. Artikel berikut akan membawa anda memahami prop, slot dan acara dalam komponen vue dan melihat cara menulis tiga API ini, saya harap ia akan membantu anda!

Pengenalan masalah

Adakah anda menghadapi senario berikut: Semasa pembangunan, anda menghadapi beberapa paparan atau fungsi yang sangat biasa dan ingin mengekstraknya dan merangkumnya ke dalam Komponen bebas yang kemudiannya dikongsi untuk digunakan oleh pembangun lain.

Untuk merangkum komponen, kita terlebih dahulu memahami komposisi asas komponen Tidak kira betapa kompleksnya komponen itu, ia mesti terdiri daripada prop, acara dan slot. Proses menulis komponen ialah proses mereka bentuk ketiga-tiga API ini. Begitu juga, jika anda ingin membaca komponen yang ditulis oleh orang lain, anda juga boleh memahaminya dengan cepat melalui ketiga-tiga API ini. [Cadangan berkaitan: "Tutorial vue.js"]

Jadi, bagaimanakah kita harus menulis tiga API ini: prop, acara dan slot?

Atribut prop

prop digunakan untuk menentukan atribut yang boleh diterima oleh komponen.

Membaca laman web rasmi vue, kita tahu prop boleh ditulis dalam tatasusunan atau objek. Untuk kemudahan, ramai orang secara langsung menggunakan kaedah penulisan susunan prop, yang tidak ketat Apabila menulis komponen umum, kita harus menggunakan kaedah penulisan objek prop sebanyak mungkin.

Anda boleh melihat kod berikut:

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

Saya percaya semua orang dapat melihat bahawa prop menggunakan penulisan objek Kami boleh mengesahkan sama ada atribut yang masuk adalah betul dan memberikan gesaan dalam masa Ini amat berguna apabila kita menulis komponen kendiri.

Memandangkan vue mesti mengikut prinsip aliran data sehala, kita tidak seharusnya cuba mengubah suai nilai prop dan perlu menggunakan penyelesaian lain.

Penyelesaian biasa untuk mengubah suai nilai prop

1 Prop menghantar nilai awal dan memberikannya kepada data

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

2 mengira atribut

props: ['size'],
computed: {
  normalizedSize() {
    return this.size.trim().toLowerCase()
  }
}

slot slot

Slot slot digunakan untuk mengedarkan kandungan komponen, seperti

<todo-button>
  Add todo
</todo-button>

<!-- todo-button 组件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>

apabila membuat persembahan, ia akan digantikan dengan Add todo , seperti

<!-- 渲染 HTML -->
<button class="btn-primary">
  Add todo
</button>

Ini adalah penggunaan paling asas bagi slot Ia berasal daripada slot yang dinamakan, ia adalah untuk membezakan slot berbilang. seperti

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

Kadangkala anda menghadapi penetapan maklumat sandaran untuk slot, jadi anda boleh menggunakannya seperti ini:

<button type="submit">
  <slot>Submit</slot>
</button>

Maklumat sandaran untuk slot ialah Serah

acara acara

Nama acara

Apabila data komponen anak diubah suai dan anda ingin memberitahu komponen induk, anda boleh menggunakan acara acara, sebagai berikut:

// 子组件
this.$emit('myEvent')

// 父组件
<my-component @my-event="doSomething"></my-component>

Seperti yang anda lihat, komponen kanak-kanak Apabila komponen memanggil, nama acara ialah kotak unta dan nama acara komponen induk ialah penamaan kebab.

Acara tersuai

Anda boleh menyesuaikan acara melalui pilihan pancaran, seperti

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

Perlu diambil perhatian bahawa jika acara tersuai dan asli Jika acara adalah sama, seperti klik, maka acara tersuai akan menggantikan acara asli

Organisasi komponen

Perkenalkan gambar dari tapak web rasmi kepada

Halaman adalah bersamaan dengan pepohon yang terdiri daripada komponen , dan acara acara membenarkan subkomponen menghantar maklumat kepada komponen induk dan slot digunakan oleh komponen induk untuk mengedarkan kandungan .

Ringkasan

Selain ketiga-tiga API ini, komponen juga mempunyai kandungan lain, seperti kitaran hayat, campuran masuk, sifat dikira, dll., tetapi untuk komponen pembangunan, Tiga API ini sudah memadai. Selepas menguasai ketiga-tiga API ini, satu-satunya perkara yang tinggal ialah memisahkan logik interaksi komponen, cuba mengagihkan fungsi yang berbeza kepada sub-komponen yang berbeza, dan kemudian membina pepohon komponen.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Dapatkan pemahaman yang mendalam tentang tiga API dalam komponen vue: prop, slot dan acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!