Contoh jenis fungsi penapis yang berbeza yang diluluskan oleh komponen dalam dokumen Vue

Sebagai pembangun bahagian hadapan, kami selalunya perlu menggunakan Vue.js untuk membina halaman. Dalam Vue.js, komponen adalah bahagian yang sangat penting. Melepasi nilai antara komponen adalah keperluan yang sangat biasa, dan terdapat banyak cara yang berbeza untuk menghantar nilai. Dalam artikel ini, kami akan menumpukan pada pemindahan nilai komponen dalam dokumen Vue dan penggunaan pelbagai jenis fungsi penapis.

Meluluskan nilai dalam komponen

Dalam Vue.js, terdapat beberapa cara untuk menghantar nilai antara komponen:

1. props & emit

Gunakan prop untuk menghantar data daripada komponen induk kepada komponen anak. Menggunakan emit, anda boleh menghantar data dalam komponen anak kepada komponen induk. Kaedah ini sering digunakan untuk komunikasi dua hala antara komponen. Dan kaedah ini sangat mudah Anda hanya perlu menentukan data yang perlu dihantar dalam prop, dan menggunakan kaedah $emit dalam subkomponen untuk mencetuskan acara.

2. menyediakan & menyuntik

menyediakan & menyuntik ialah API yang ditambahkan dalam versi Vue.js2.2.0. Gunakan menyediakan untuk mentakrifkan data yang perlu dihantar dan gunakan suntikan untuk menyuntik data ini ke dalam komponen. Kaedah ini sering digunakan untuk menghantar data merentasi peringkat.

3. $ibu bapa & $anak

Pokok komponen dalam Vue.js ialah proses lintasan pertama mendalam. Gunakan $parent untuk mendapatkan contoh komponen induk, dan gunakan $children untuk mendapatkan contoh komponen anak. Kelemahan kaedah ini ialah ia tidak cukup fleksibel dan tidak semudah props & emit dan provide & inject.

Jenis fungsi penapis yang berbeza

Apabila kita perlu menapis atau mengubah data, kita boleh menggunakan fungsi penapis dalam Vue.js. Vue.js menyediakan jenis fungsi penapis berikut:

1. Fungsi penapis global

Fungsi penapis global ditakrifkan melalui kaedah Vue.filter() bagi. Setelah ditakrifkan, ia boleh digunakan dalam mana-mana komponen. Kelebihan fungsi penapis global ialah ia mudah dan boleh digunakan dalam berbilang komponen setelah ditentukan. Walau bagaimanapun, fungsi penapis global akan digunakan beberapa kali, yang akan membawa kepada prestasi yang lemah jika terdapat banyak data yang ditapis.

2. Fungsi penapis tempatan

Fungsi penapis tempatan ditakrifkan dalam komponen. Ia hanya boleh digunakan di dalam komponen ini. Kelebihan pendekatan ini adalah prestasi yang lebih baik kerana ia hanya perlu digunakan sekali dalam komponen. Kelemahannya ialah ia sangat terhad dan hanya boleh digunakan dalam komponen.

3. Fungsi penapis fungsi tulen

Fungsi penapis fungsi tulen merujuk kepada memasukkan parameter tertentu dan mengeluarkan hasil tertentu, yang tidak akan terjejas oleh sebarang keadaan luaran. Kaedah ini lebih mudah digunakan dan boleh mengelakkan beberapa kesan sampingan. Walau bagaimanapun, perlu diingatkan bahawa fungsi penapis fungsi tulen tidak boleh mengubah data asal.

Contoh fungsi penapis

Mari kita lihat penggunaan fungsi penapis melalui contoh. Dalam contoh ini, kami mentakrifkan komponen, menghantar tatasusunan kepada komponen ini dan menggunakan fungsi penapis di dalam komponen untuk menapis tatasusunan.

<template>
  <div>
    <ul>
      <li v-for="item in filteredData">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item % 2 === 0
      }).map(item => {
        return item * 2
      })
    }
  }
};
</script>

Komponen ini menghantar data tatasusunan dan menapis tatasusunan melalui fungsi penapis. Dalam atribut yang dikira, kami menggunakan kaedah penapis dan peta JavaScript untuk menapis nombor genap dalam tatasusunan dan mendarabkan data yang ditapis dengan 2. Akhir sekali, kami mengembalikan data yang ditapis kepada komponen untuk paparan.

Ringkasan

Vue.js menyediakan pelbagai kaedah pemindahan nilai komponen dan fungsi penapis Kita boleh memilih kaedah yang berbeza untuk pembangunan mengikut keperluan yang berbeza. Semasa penggunaan, kita perlu mempertimbangkan secara menyeluruh faktor seperti prestasi, fleksibiliti, kebolehgunaan semula kod, dll. untuk menentukan kaedah pembangunan terbaik.

Atas ialah kandungan terperinci Contoh jenis fungsi penapis yang berbeza yang diluluskan oleh komponen dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!