Bagaimana untuk merangkum komponen pihak ketiga dengan elegan dalam Vue? Pengenalan kepada kaedah pembungkusan

Bagaimana untuk merangkum komponen pihak ketiga dengan elegan dalam Vue? Artikel berikut akan menggunakan contoh untuk meneroka cara untuk merangkum komponen pihak ketiga dengan lebih elegan dalam Vue. Saya harap ia akan membantu semua orang.

1. Penerangan senario permintaan

Semasa pembangunan sebenar, untuk mengurangkan penciptaan semula, meningkatkan kecekapan kerja dan menjimatkan masa dan kos pembangunan, Tidak dapat dielakkan untuk menggunakan perpustakaan komponen UI, seperti elemen-ui, yang sangat popular di bahagian hadapan web. Tetapi kadangkala, kita perlu membuat beberapa pengubahsuaian berdasarkan komponen asal, seperti komponen imej. Kita perlu menyatukan imej khusus yang dipaparkan apabila pemuatan imej gagal, dan menambahnya setiap kali komponen digunakan. Ia menyusahkan dan memakan masa Kuncinya ialah kos penyelenggaraan yang tinggi Apabila anda perlu mengemas kini imej yang telah dimuatkan dengan tidak betul. Anda perlu mencari dan mengubah suai tempat di mana komponen ini digunakan semula. (Belajar perkongsian video: tutorial vuejs)

Contoh lain ialah komponen halaman tersuai, yang juga sangat biasa Gaya komponen dan bilangan halaman setiap halaman yang disokong secara lalai. Enkapsulasi dan penggunaan semula bermanfaat dari segi kebolehselenggaraan dan kecekapan pembangunan.

Walau bagaimanapun, tidak perlu menulis komponen paging dari awal, hanya merangkumnya pada asas asal. Jadi bagaimana untuk merangkum komponen perpustakaan komponen pihak ketiga dengan cepat dan elegan? v-bind="$attrs" dan v-on="$ pendengar" ="$pendengar" akan membawakan kita kejutan. Mereka boleh menjadikan komponen terkapsul "mewarisi" hampir semua sifat ikatan v dan peristiwa v-on komponen asal, dan penggunaan serta fungsinya adalah sama seperti dalam komponen asal.

Imbas el sebagai komponen imej tersuai dan gunakan imej tersuai untuk memaparkan imej di mana-mana sahaja. Semasa proses pemuatan imej, gesaan "Memuatkan..." akan dipaparkan secara seragam, dan apabila ralat pemuatan berlaku, imej lalai bersatu akan dipaparkan. Berikut ialah proses pemuatan komponen imej tersuai dan kesan ralat pemuatan.

2. Pengenalan kepada perkara teknikal utama

1.v-bind="$attrs"

v Penggunaan hebat -bind="$attrs" adalah untuk mencipta komponen peringkat lebih tinggi Apabila merangkum komponen pihak ketiga,

secara automatik boleh mengikat atribut v-bind yang digunakan dalam skop induk

Dan turunkan komponen terkapsul menggunakan v-bind="$attrs".

Pengenalan yang diambil dari laman web rasmi vue

mengandungi ikatan atribut

(kelas dan gaya) yang tidak dikenali (dan diperoleh) sebagai prop dalam induk skop kecuali). Apabila komponen tidak mengisytiharkan sebarang prop,

semua ikatan skop induk (kecuali kelas dan gaya) akan disertakan di sini,

dan boleh melalui v-bind="$attrs" Import komponen dalaman - berguna apabila mencipta komponen peringkat tinggi.

Sebagai contoh, selepas menggunakan v-bind="$attrs" untuk komponen Imej tersuai kami yang terkapsul, Kami juga mempunyai hampir semua sifat el-image dalam komponen tersuai-Imej. Dan kesan dan penggunaannya adalah sama seperti apabila kita menggunakan el-image. Dalam erti kata lain, kita boleh menggunakan Imej tersuai dengan melihat artikel el-image.

2.v-on="$listeners"

v-on="$pendengar" adalah sama seperti v- bind="$attrs" adalah serupa, Ia boleh menurunkan pendengar masa menggunakan v-on dalam skop induk kepada pendengar masa menggunakan v-on="$komponen pendengar" dan v-bind="$attrs" mempunyai kesan yang sama, Hanya satu sifat itu ialah satu peristiwa. Atau ambil komponen Imej tersuai sebagai contoh, Pada masa ini, komponen Imej tersuai mempunyai hampir semua peristiwa komponen el-imej. Dan kesan dan penggunaannya adalah sama seperti apabila kita menggunakan el-image.

Mengandungi pendengar acara v-on dalam skop induk (tanpa .pengubah suai asli).

Ia boleh disalurkan ke dalam komponen dalaman melalui v-on="$listeners" - sangat berguna apabila mencipta komponen peringkat lebih tinggi.

Pengenalan yang diambil dari laman web rasmi vue

3. Contoh kod untuk merangkum el-imej

Contoh penggunaan komponen Imej tersuai

<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>

Contoh merangkum el-imej ke dalam komponen Imej tersuai

<template>
  <div id="CustomImage">
    <el-image v-bind="$attrs" v-on="$listeners">
      <div slot="error">
        <img :src="require(&#39;image-f/icon-empty-img.png&#39;)" alt="图片加载失败.png"/>
      </div>
      <div slot="placeholder">加载中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: &#39;CustomImage&#39;
}
</script>

<style scoped>
  #CustomImage {
  .image-slot {
    text-align: center;
  }

  .placeholder-slot {
    text-align: center;
  }
}
</style>

(Perkongsian video pembelajaran: pembangunan bahagian hadapan web, Pengenalan kepada pengaturcaraan )

Atas ialah kandungan terperinci Bagaimana untuk merangkum komponen pihak ketiga dengan elegan dalam Vue? Pengenalan kepada kaedah pembungkusan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!