Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Vue
Code

Corak Reka Bentuk untuk Komunikasi Antara Komponen Vue.js

by
Difficulty:AdvancedLength:LongLanguages:

Malay (Melayu) translation by Muhammad Viqqri (you can also view the original English article)

Sebagai pemaju, kami ingin menghasilkan kod yang boleh diurus dan dikendalikan, yang juga lebih mudah untuk debug dan menguji. Untuk membuat ini mungkin, kami mengamalkan amalan terbaik yang dikenali sebagai corak. Corak adalah algoritma dan seni bina yang terbukti, yang membantu kita melakukan tugas-tugas tertentu dengan cara yang efisien dan dapat diramalkan.

Dalam tutorial ini, kami akan melihat corak komunikasi komponen Vue.js yang paling biasa, bersama dengan beberapa perangkap yang harus dielakkan. Kita semua tahu bahawa, dalam kehidupan sebenar, tiada penyelesaian tunggal untuk semua masalah. Dengan cara yang sama, dalam pembangunan aplikasi Vue.js, tiada corak sejagat untuk semua senario pengaturcaraan. Setiap pola mempunyai kelebihan dan kekurangannya sendiri, dan ia sesuai untuk kes-kes tertentu. Perkara penting untuk pemaju Vue.js adalah untuk mengetahui semua corak yang paling biasa, jadi kami boleh memilih yang sesuai untuk sesuatu projek. Ini akan membawa kepada komunikasi komponen yang tepat dan cekap.

Mengapa Komunikasi Komponen yang Baik Penting?

Apabila kami membina sebuah aplikasi dengan rangka kerja berasaskan komponen seperti Vue.js, kami berhasrat untuk menjadikan komponen aplikasi kami sebagai terpencil kerana mereka boleh. Ini menjadikannya boleh diguna semula, dikekalkan, dan boleh diuji. Untuk membuat komponen boleh diguna semula, kami perlu membentuknya dalam bentuk yang lebih abstrak dan dipadam (atau dilengkapkan dengan lama), dan oleh itu, kami boleh menambahkannya ke aplikasi kami atau mengalih keluarnya tanpa memecah fungsi aplikasi.

Walau bagaimanapun, kami tidak dapat mencapai pengasingan dan kemerdekaan sepenuhnya dalam komponen apl kami. Pada satu ketika, mereka perlu saling berkomunikasi: untuk menukar beberapa data, untuk menukar keadaan aplikasi, dan lain-lain. Oleh itu, penting bagi kami untuk belajar bagaimana untuk mencapai komunikasi ini dengan sewajarnya sambil mengekalkan aplikasi yang berfungsi, fleksibel, dan berskala.

Gambaran Keseluruhan Komponen Komunikasi Vue.js

Di Vue.js, terdapat dua jenis utama komunikasi antara komponen:

  1. Komunikasi ibu bapa dan kanak-kanak yang langsung, berdasarkan hubungan ibu bapa dan anak yang ketat dan hubungan antara anak dengan ibu bapa.
  2. Komunikasi lintas komponen, di mana satu komponen boleh 'bercakap' kepada mana-mana orang lain tanpa menghiraukan hubungan mereka.

Dalam bahagian berikut, kami akan meneroka kedua-dua jenis bersama dengan contoh yang sesuai.

Komunikasi Ibu Bapa dan Anak Langsung

Komponen komponen model standard, yang menyokong Vue.js daripada kotak, adalah model ibu bapa-anak yang disedari melalui peraga dan peristiwa adat. Dalam rajah di bawah, anda boleh melihat gambaran visual bagaimana model ini kelihatan dalam tindakan.

Seperti yang anda lihat, ibu bapa boleh berkomunikasi hanya dengan anak-anaknya yang langsung, dan kanak-kanak boleh berkomunikasi secara langsung hanya dengan ibu bapa mereka. Dalam model ini, tiada komunikasi saudara atau komunikasi silang boleh dilakukan.

Dalam bahagian berikut, kami akan mengambil komponen dari rajah di atas dan akan melaksanakannya dalam satu siri contoh praktikal.

Komunikasi Ibu Bapa Kepada Anak

Mari kita anggap komponen yang kita miliki adalah sebahagian daripada permainan. Kebanyakan permainan memaparkan skor permainan di antara muka mereka. Bayangkan kita mempunyai pemboleh ubah score yang diisytiharkan dalam komponen Parent A, dan kita mahu memaparkannya dalam komponen Child A. Jadi, bagaimana kita boleh melakukannya?

Untuk menghantar data dari ibu bapa kepada anak-anaknya, Vue.js menggunakan Props. Terdapat tiga langkah yang perlu untuk lulus hartanah:

  1. Mendaftarkan harta dalam kanak-kanak, seperti ini props: [''score'']
  2. Menggunakan harta berdaftar dalam templat kanak-kanak, seperti ini <span>Score: {{score}} </span>
  3. Mengikat harta benda kepada pemboleh ubah score (dalam template ibu bapa), seperti ini <child-a :score="score"/>

Mari kita telusuri contoh penuh untuk lebih memahami apa yang sebenarnya berlaku:

Contoh CodePen

Mengesahkan Prop

Untuk keringkasan dan kejelasan, saya mendaftarkan alat dengan menggunakan variannya. Tetapi dalam perkembangan sebenar, ia disyorkan untuk mengesahkan prop. Ini akan memastikan bahawa alat peraga akan menerima jenis nilai yang betul. Sebagai contoh, harta score kami boleh disahkan seperti ini:

Apabila menggunakan alat peraga, pastikan anda memahami perbezaan antara varian literal dan dinamiknya. Sangkar adalah dinamik apabila kita mengikatnya kepada beberapa pembolehubah (sebagai contoh, v-bind: skor = ''skor'' atau kecacatannya :skor = ''skor''), dan oleh itu, nilai prop akan berubah-ubah bergantung pada nilai pembolehubah. Jika kita hanya meletakkan beberapa nilai tanpa mengikat, maka nilai itu akan ditafsirkan secara harfiah dan hasilnya akan statik. Dalam kes kita, jika kita menulisnya score = ''score'', ia akan memaparkan score bukan 100. Ini adalah prop yang harfiah. Anda harus berhati-hati dengan perbezaan yang halus ini.

Mengemas kini Prop Prop

Setakat ini, kami telah berjaya memaparkan skor permainan, tetapi pada satu ketika, kami perlu mengemaskinikannya. Mari cuba ini.

Kami mencipta kaedah changeScore(), yang perlu mengemas kini skor selepas kami menekan butang Change Score. Apabila kami berbuat demikian, nampaknya skor dikemas kini dengan betul, tetapi kami mendapat peringatan Vue berikut dalam konsol:

[Vue warn]: Elakkan bermutasi secara langsung kerana nilai akan ditimpa ganti apabila komponen induk membuat semula. Sebaliknya, gunakan data atau harta yang dikira berdasarkan nilai prop. Prop yang bermutasi: 'skor'

Seperti yang anda dapat lihat, Vue memberitahu kami bahawa prop akan ditimpa jika ibu bapa membuat semula. Mari kita uji ini dengan meniru tingkah laku sedemikian dengan kaedah $ forceUpdate() yang terbina dalam:

Contoh CodePen

Sekarang, apabila kita menukar skor dan kemudian tekan butang Rerender Parent, kita dapat melihat bahawa skor kembali kepada nilai awal dari ibu bapa. Jadi Vue memberitahu kebenaran!

Perlu diingat walaupun bahawa susunan dan objek akan mempengaruhi ibu bapa mereka, kerana mereka tidak disalin, tetapi diluluskan dengan rujukan.

Oleh itu, apabila kita perlu bermutasi dalam kanak-kanak, terdapat dua cara untuk mengatasi kesan sampingan ini.

Mengganti Prop Dengan Harta Data Tempatan

Kaedah pertama ialah menjadikan markah score menjadi harta data setempat (localScore), yang digunakan dalam kaedah changeScore() dan dalam templat:

Contoh CodePen

Sekarang, jika kita menekan butang Rerender Parent lagi, selepas kita menukar skor, kita akan melihat bahawa kali ini skor tetap sama.

Mengganti Prop Dengan Harta Yang Diitung

Kaedah kedua ialah menggunakan markah score dalam harta yang dihitung, di mana ia akan berubah menjadi nilai baru:

Contoh CodePen

Di sini, kami mencipta doubleScore(), yang mendarabkan score orang tua dengan dua dan kemudian, hasilnya dipaparkan dalam templat. Jelasnya, menekan butang Rerender Parent tidak akan mempunyai sebarang kesan sampingan.

Komunikasi Anak-ke-Induk

Sekarang, mari kita lihat bagaimana komponen boleh berkomunikasi dengan cara yang bertentangan.

Kami baru sahaja melihat cara memupuk prop pada kanak-kanak itu, tetapi bagaimana jika kita perlu menggunakan prop itu dalam lebih dari satu komponen kanak-kanak. Dalam hal ini, kita perlu mengubah prop dari sumbernya kepada ibu bapa, jadi semua komponen yang menggunakan prop akan diperbarui dengan betul. Untuk memenuhi keperluan ini, Vue memperkenalkan custom events.

Prinsip di sini ialah kami memberitahu ibu bapa untuk perubahan yang ingin kami lakukan, ibu bapa melakukan perubahan itu, dan perubahan itu dapat dilihat melalui prop yang diluluskan. Berikut adalah langkah-langkah yang perlu untuk operasi ini:

  1. Dalam kanak-kanak, kita memancarkan satu peristiwa yang menggambarkan perubahan yang ingin kita lakukan, seperti ini. this.$emit ('updatingScore', 200)
  2. Dalam induk, kami mendaftarkan pendengar acara untuk acara yang dipancarkan, seperti @updatingscore="updatescore"
  3. Apabila acara dipancarkan kaedah yang diberikan akan mengemas kini prop, seperti ini this.score = newValue

Mari kita telusuri contoh penuh untuk lebih memahami bagaimana ini berlaku:

Contoh CodePen

Kami menggunakan kaedah $emit() yang terbina dalam untuk memancarkan peristiwa. Kaedah ini mengambil dua hujah. Hujah pertama adalah peristiwa yang kita mahu memancarkan, dan yang kedua ialah nilai baru.

Pengubahsuaian .sync

Vue menawarkan pengubahsuaian .sync yang berfungsi sama dan kami mungkin mahu menggunakannya sebagai jalan pintas dalam sesetengah kes. Dalam kes sedemikian, kami menggunakan kaedah $emit() dengan cara yang sedikit berbeza. Sebagai argumen acara, kami akan mengemas kini: updatescore seperti ini. this.$emit (''update: score'', 200), dan kemudian, apabila kita mengikat skor score, kita menambah pengubahsuaian .sync seperti <child-a:score.sync="score"/> Dalam komponen Parent A, kami mengeluarkan kaedah updateScore() dan pendaftaran acara (@updatingScore = ''updateScore'') kerana mereka tidak diperlukan lagi.

Contoh CodePen

Kenapa Tidak Gunakan this.$parent dan this.$children untuk Direct parent-Child Communication?

Vue menawarkan dua kaedah API yang memberikan kita akses langsung kepada komponen ibu bapa dan kanak-kanak: this.$parent dan this.$children. Pada mulanya ia mungkin menggoda untuk menggunakannya sebagai alternatif yang lebih cepat dan mudah untuk alat dan acara, tetapi kita tidak perlu. Ini dianggap sebagai amalan yang buruk, atau anti corak, kerana ia membentuk gandingan yang ketat antara komponen induk dan anak. Yang terakhir membawa kepada tidak fleksibel dan mudah untuk memecahkan komponen, yang sukar untuk debug dan alasan. Kaedah API ini jarang digunakan, dan sebagai peraturan praktikal, kita harus mengelakkannya atau menggunakannya dengan berhati-hati.

Komunikasi Komponen Dua Hala

Prop dan acara adalah satu arah. Props turun, peristiwa naik. Tetapi dengan menggunakan alat dan acara bersama-sama, kita dapat berkomunikasi secara berkala dan turun dengan pokok komponen, yang mengakibatkan data mengikat dua hala. Inilah sebenarnya apa yang dirujuk oleh v-model secara dalaman.

Komponen Cross-Komponen

Pola komunikasi ibu bapa dan kanak-kanak dengan cepat menjadi tidak mencukupi dan tidak praktikal kerana kerumitan aplikasi kami berkembang. Masalah dengan sistem acara-acara adalah bahawa ia berfungsi secara langsung, dan ia terikat dengan ketat pada pokok komponen. Peristiwa Vue tidak gelembung, berbeza dengan orang asli, dan itulah sebabnya kita perlu mengulangi memancarkannya sehingga kita mencapai sasaran. Akibatnya kod kami menjadi kembung dengan terlalu banyak pendengar dan emitter acara. Oleh itu, dalam aplikasi yang lebih rumit, kita harus mempertimbangkan menggunakan pola komunikasi silang komponen.

Mari lihat rajah di bawah:

Seperti yang dapat kita lihat, dalam jenis komunikasi apa pun, setiap komponen boleh menghantar dan / atau menerima data dari komponen lain tanpa memerlukan langkah-langkah perantaraan dan komponen perantaraan.

Dalam bahagian yang berikut, kami akan meneroka pelaksanaan yang paling umum komunikasi silang komponen.

Bas Acara Global

Bus acara global adalah contoh Vue, yang kami gunakan untuk memancarkan dan mendengar peristiwa. Mari lihat dalam praktiknya.

Contoh CodePen

Berikut ialah langkah-langkah untuk membuat dan menggunakan bas acara:

  1. Mengisytiharkan bas peristiwa kami sebagai contoh Vue baru, seperti peristiwa const eventBus = new Vue()
  2. Memaparkan peristiwa dari komponen sumber, seperti peristiwa this.$emit ('updatingScore', 200)
  3. Mendengar peristiwa yang dipancarkan dalam komponen sasaran, seperti peristiwa evntBus.$on ('updatingScore', this.updateScore)

Dalam contoh kod di atas, kami alih @updatingscore= ''updateScore'' dari child, dan kami menggunakan cangkuk kitar hayat yang created() sebagai gantinya, untuk mendengar acara updatingscore. Apabila acara dipancarkan, kaedah updateScore () akan dilaksanakan. Kami juga boleh lulus kaedah pengemaskinian sebagai fungsi anonim:

Corak bas acara global boleh menyelesaikan masalah dengan kembung peristiwa untuk beberapa melanjutkan, tetapi ia memperkenalkan beberapa isu lain. Data aplikasi boleh ditukar dari mana-mana bahagian aplikasi tanpa meninggalkan jejak. Ini menjadikan aplikasi lebih sukar untuk debug dan menguji. Untuk aplikasi yang lebih kompleks, di mana perkara-perkara dapat dengan cepat dapat mengawal, kita harus mempertimbangkan corak pengurusan keadaan khusus, seperti Vuex, yang akan memberikan kita kawalan lebih halus, struktur kod dan organisasi yang lebih baik, dan penjejakan perubahan yang berguna dan debugging ciri-ciri.

Vuex

Vuex adalah perpustakaan pengurusan negeri yang disesuaikan untuk membina aplikasi Vue.js yang kompleks dan berskala. Kod yang ditulis dengan Vuex lebih terperinci, tetapi ini boleh dibeli dalam jangka masa panjang. Ia menggunakan kedai terpusat untuk semua komponen dalam aplikasi, menjadikan aplikasi kami lebih teratur, telus, dan mudah untuk dijejaki dan debug. Kedai ini sepenuhnya reaktif, jadi perubahan yang kami buat dapat dilihat dengan serta-merta.

Di sini, saya akan memberi penjelasan ringkas mengenai apa Vuex, ditambah dengan contoh kontekstual. Sekiranya anda ingin menyelam lebih mendalam ke Vuex, saya cadangkan anda melihat tutorial khusus saya tentang membina aplikasi kompleks dengan Vuex.

Sekarang mari jelajahi rajah berikut:

Seperti yang dapat anda lihat, aplikasi Vuex dibuat daripada empat bahagian yang membezakan:

  • Negeri adalah tempat kami memegang data aplikasi kami.
  • Getters adalah kaedah untuk mengakses keadaan kedai dan menjadikannya komponen.
  • Mutasi adalah kaedah sebenar dan hanya membenarkan mutasi negara.
  • Tindakan adalah kaedah untuk melaksanakan kod asynchronous dan mencetuskan mutasi.

Mari buat kedai mudah dan lihat bagaimana semua ini berfungsi dalam tindakan.

Contoh CodePen

Di kedai, kami ada yang berikut:

  • Variabel score ditetapkan dalam objek negeri.
  • incrementScore() peningkatan, yang akan meningkatkan skor dengan nilai yang diberikan.
  • Score() getter, yang akan mengakses pemboleh ubah score dari negeri dan akan menjadikannya dalam komponen.
  • Tindakan incrementScoreAsync(), yang akan menggunakan incrementScore() mutasi untuk menambah skor selepas masa tertentu.

Dalam contoh Vue, bukan props kami menggunakan sifat yang dikira untuk mendapatkan nilai skor melalui getter. Kemudian, untuk menukar skor, dalam komponen Child A kami menggunakan mutasi store.commit ('incrementScore', 100). Dalam komponen Parent B kita menggunakan tindakan store.dispatch ('incrementScoreAsync', 3000).

Suntikan Ketergantungan

Sebelum kita membungkus, mari kita meneroka satu lagi corak. Kes-kes penggunaannya adalah terutamanya untuk perpustakaan komponen bersama dan plugin, tetapi ia patut disebutkan untuk kesempurnaan.

Dependency injection membolehkan kita menentukan perkhidmatan melalui provide property, yang seharusnya menjadi objek atau fungsi yang mengembalikan objek, dan menjadikannya tersedia untuk semua keturunan komponen, bukan hanya anak-anaknya yang langsung. Kemudian, kita boleh menggunakan perkhidmatan tersebut melalui inject property.

Mari lihat tindakan ini dalam tindakan:

Contoh CodePen

Dengan menggunakan pilihan Provide komponen Grand Parent, kami membuat pembolehubah score yang tersedia untuk semua keturunannya. Setiap satu daripada mereka tidak dapat mengaksesnya dengan mengisytiharkan inject: [''score''] harta. Dan, seperti yang anda lihat, skor dipaparkan dalam semua komponen.

Nota: Pengikat yang membuat suntikan ketergantungan tidak reaktif. Oleh itu, jika kita mahukan perubahan yang dibuat dalam komponen pembekal dapat dilihat dalam keturunannya, kita perlu memberikan objek kepada harta data dan menggunakan objek tersebut dalam perkhidmatan yang disediakan.

Mengapa tidak Kami this.$ Root untuk Komponen Cross-Komponen?

Sebab-sebab kita tidak boleh menggunakan this.$root adalah sama dengan yang untuk this.$parent dan this.$ children diterangkan sebelumnya-ia mewujudkan terlalu banyak dependencies beterrn. Bergantung kepada mana-mana kaedah untuk komunikasi komponen mesti dielakkan.

Cara Memilih Corak Yang Benar?

Jadi, anda sudah mengetahui semua cara komunikasi komponen yang biasa. Tetapi bagaimana untuk memutuskan mana yang paling sesuai untuk senario anda?

Memilih corak yang betul bergantung pada projek yang anda terlibat atau aplikasi yang ingin anda bina. Ia bergantung kepada kerumitan dan jenis aplikasi anda. Mari kita cari senario yang paling biasa:

  • Dalam apl mudah, alat dan acara akan menjadi semua yang anda perlukan.
  • Middle-range aplikasi akan memerlukan cara komunikasi yang lebih fleksibel, seperti bas acara dan suntikan ketergantungan.
  • Untuk aplikasi yang kompleks, besar-besaran anda pasti akan memerlukan kuasa Vuex sebagai sistem pengurusan negara yang lengkap.

Dan satu perkara yang terakhir. Anda tidak perlu menggunakan mana-mana corak yang dijelajahi hanya kerana orang lain memberitahu anda untuk berbuat demikian. Anda bebas memilih dan menggunakan apa jua corak yang anda mahu, selagi anda menguruskan untuk memastikan aplikasi anda berfungsi, dan mudah dijaga dan berskala.

Kesimpulannya

Dalam tutorial ini, kami mempelajari corak komunikasi komponen Vue.js yang paling biasa. Kami melihat bagaimana untuk melaksanakannya dalam amalan dan cara memilih yang betul, yang sesuai untuk projek kami. Ini akan memastikan bahawa aplikasi yang kami bina menggunakan jenis komunikasi komponen yang betul yang menjadikannya berfungsi, dikendalikan, boleh diuji dan boleh skala.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.