Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen penarafan bintang

Dalam aplikasi web, komponen penarafan bintang sering digunakan untuk menilai barangan, perkhidmatan atau kandungan lain. Untuk memudahkan pembangun menggunakan, komuniti Vue.js sudah mempunyai banyak pemalam komponen penarafan bintang Walau bagaimanapun, pemalam komponen penarafan bintang juga perlu dirangkumkan sendiri. Artikel ini akan meninggalkan cara tradisional menulis komponen, memperkenalkan API Komposisi Vue.js 3 dan menerangkan cara menggunakan pemalam Vue.js untuk merangkum komponen penarafan bintang.

Mari kita pelajari terlebih dahulu tentang API Komposisi. API Komposisi terutamanya mempunyai kelebihan berikut:

1. Ekapsulasi logik yang lebih baik: Kini, logik boleh dikumpulkan mengikut logik dan bukannya mentakrifkan sifat dan kaedah mengikut kitaran hayat atau API pilihan. Di samping itu, anda boleh mengumpulkannya mengikut prinsip tanggungjawab tunggal, menjadikan kod lebih mudah untuk dikekalkan dan diuji.
2. Penggunaan semula logik yang lebih mudah: Merangkum logik ke dalam cangkuk tersuai menjadikannya mudah untuk berkongsi dan menggunakan semula dalam komponen, berkongsinya dengan pembangun lain atau mengedarkannya pada npm untuk digunakan oleh orang lain.
3. Kod komponen yang lebih intuitif: Memandangkan logik dibahagikan kepada ketulan yang lebih kecil, kod dibuat lebih intuitif dan lebih mudah difahami, mengurangkan penandaan dan sarang yang tidak perlu, menjadikannya lebih mudah untuk menyimpulkan peranan komponen.
4. Inferens jenis yang lebih baik: API Komposisi disepadukan rapat dengan TypeScript, membolehkan pembangun memanfaatkan keupayaan inferens jenis TypeScript untuk menulis kod yang lebih mantap.

Seterusnya, kami akan menggunakan API Komposisi untuk mereka bentuk dan melaksanakan komponen penarafan bintang.

Langkah 1: Buat pemalam Vue.js

Pemalam ialah lanjutan daripada struktur asas Vue.js. Pemalam Vue.js boleh menyediakan fungsi peringkat global kepada aplikasi Vue.js, jadi ia sesuai untuk melaksanakan komponen atau arahan biasa. Berikut ialah langkah asas untuk mencipta dan memasang pemalam Vue.js:

1. Buat objek JavaScript dan tentukan kaedah pemasangan dalam objek. Kaedah ini menerima Vue sebagai parameter dan mendaftarkan komponen baharu atau fungsi lain dalam skop contoh Vue() baharu.
2. Tentukan komponen atau utiliti lain dalam kaedah pemasangan.
3. Panggil kaedah statik use() pada Vue, menghantar objek yang mengandungi pemalam yang perlu dipasang. Vue.js akan memanggil kaedah pemasangan dalam objek ini, menghantar tika Vue.js sebagai parameter kepada kaedah tersebut.

Kod sampel adalah seperti berikut:

// 定义插件对象
const StarRating = {
  install: function(Vue) {
    // 在install方法中注册全局组件 star-rating
    Vue.component('star-rating', {
      // 组件选项
    })
  }
}

// 调用Vue.use()方法安装插件
Vue.use(StarRating)

Langkah 2: Mereka bentuk sifat dan peristiwa komponen

Dalam API Komposisi, adalah disyorkan untuk menggunakan kaedah reaktif() untuk menentukan keadaan komponen. Gunakan kaedah computed() untuk mengira keadaan terbitan komponen dan gunakan kaedah watch() untuk memantau perubahan keadaan komponen. Untuk menghantar data dengan lebih baik melalui prop dan memancarkan, kita boleh menggunakan reactive() untuk mentakrifkan objek harta dan peristiwa.

Komponen harus mempunyai atribut berikut:

• rating: rating semasa
• maxRating: bilangan maksimum rating
• starSize: star size
• padding: jarak antara bintang
• showRating: sama ada untuk memaparkan rating

Komponen harus mempunyai peristiwa berikut:

• kemas kini : Dicetuskan secara automatik apabila rating dikemas kini

Berikut ialah kod sampel untuk mentakrifkan sifat dan objek acara:

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        return {
          state,
          updateRating
        }
      }
    })
  }
}

Langkah 3: Laksanakan UI komponen

Seterusnya, Kami menggunakan kod templat untuk melaksanakan UI komponen. Fungsi persediaan() digunakan dalam Vue.js3 untuk menetapkan status dan peristiwa komponen, dan ungkapan dan arahan interpolasi dalam templat digunakan untuk memaparkan UI komponen.

Berikut ialah kod sampel untuk melaksanakan UI komponen:

const StarRating = {
  install: function(Vue) {
    Vue.component('star-rating', {
      setup(props, {emit}) {
        const state = reactive({
          rating: 0,
          maxRating: props.maxRating || 5,
          starSize: props.starSize || 25,
          padding: props.padding || 5,
          showRating: props.showRating || false,
        })

        function updateRating(rating) {
          state.rating = rating
          emit('update', rating)
        }

        const stars = []
        for (let i = 0; i < state.maxRating; i++) {
          stars.push(i < state.rating ? 'star' : 'star_border')
        }

        return {
          state,
          updateRating,
          stars,
        }
      },
      template: `
        <div>
          <i 
            v-for="star in stars"
            :key="star"
            :class="[star]"
            :style="{
              'font-size': state.starSize + 'px', 
              'padding-right': state.padding + 'px',
            }"
            @click="updateRating(stars.indexOf(star) + 1)"
          ></i>
          <span v-if="state.showRating">{{state.rating}}/{{state.maxRating}}</span>
        </div>
      `
    })
  }
}

Kami menggunakan arahan v-for untuk menjadikan bintang dalam gelung, dan menggunakan tag i dan ikon font FontAwesome untuk memberikan ikon bintang. Dengan cara ini kami boleh mengemas kini penilaian berdasarkan pilihan pengguna.

Langkah 4: Menggunakan Komponen

Kini, kami telah menyelesaikan pembangunan pemalam komponen penarafan bintang. Kami boleh memasang pemalam ini secara global dalam aplikasi Vue.js kami dan kemudian menggunakannya dalam mana-mana templat komponen.

Kod contoh untuk menggunakan komponen dalam aplikasi Vue.js:

const app = Vue.createApp({})
app.use(StarRating)

app.component('my-component', {
  data() {
    return {
      rating: 3
    }
  },
  template: `
    <div>
      <star-rating 
        :max-rating="5" 
        :show-rating="true"
        :rating="rating"
        @update="rating = $event"
      />
    </div>
  `
})

app.mount('#app')

Dalam kod sampel ini, kami telah mendaftarkan pemalam StarRating dalam aplikasi Vue.js dan menambahkannya dalam komponen saya Komponen pemarkahan digunakan dalam komponen. Dalam komponen komponen saya, kami menggunakan parameter $event untuk mengakses nilai rating baharu acara kemas kini.

Kesimpulan

API Komposisi membawa banyak ciri baharu kepada pembangunan komponen Vue.js. Menggunakan ciri baharu ini digabungkan dengan mekanisme pemalam Vue.js menjadikannya lebih mudah untuk merangkum dan menggunakan semula komponen. Dalam artikel ini, kami mempelajari langkah demi langkah cara membangunkan komponen penarafan bintang menggunakan API Komposisi dan pemalam Vue.js. Kini, anda boleh menggunakan teknik ini untuk membangunkan dan membungkus pemalam komponen anda sendiri.

Atas ialah kandungan terperinci Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen penarafan bintang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!