Reka bentuk corak untuk komunikasi antara komponen Vue.js

Sebagai pembangun, kami mahu menghasilkan kod yang boleh diurus dan diselenggara, yang juga lebih mudah untuk nyahpepijat dan diuji. Untuk mencapai matlamat ini, kami menggunakan amalan terbaik yang dipanggil corak. Corak ialah algoritma dan seni bina terbukti yang membantu kami menyelesaikan tugasan tertentu dengan cara yang cekap dan boleh diramal.

Dalam tutorial ini, kita akan melihat pada corak komunikasi komponen Vue.js yang paling biasa, serta beberapa perangkap yang harus kita elakkan. Kita semua tahu bahawa dalam kehidupan sebenar, tiada penyelesaian tunggal untuk setiap masalah. Begitu juga, dalam pembangunan aplikasi Vue.js, tiada corak universal yang digunakan untuk semua senario pengaturcaraan. Setiap mod mempunyai kelebihan dan kekurangannya sendiri dan sesuai untuk kes penggunaan tertentu.

Perkara yang paling penting untuk pembangun Vue.js ialah memahami semua corak yang paling biasa supaya kita boleh memilih yang sesuai untuk projek tertentu. Ini menghasilkan komunikasi komponen yang betul dan cekap.

Mengapa komunikasi komponen yang betul penting?

Apabila kami membina apl menggunakan rangka kerja berasaskan komponen seperti Vue.js, matlamat kami adalah untuk memastikan komponen apl itu diasingkan sebaik mungkin. Ini menjadikan mereka boleh diguna semula, boleh diselenggara dan boleh diuji. Untuk menjadikan komponen boleh diguna semula, kita perlu membentuknya dalam bentuk yang lebih abstrak dan dipisahkan (atau digandingkan secara longgar), supaya kita boleh menambahkannya pada aplikasi kita atau mengalih keluarnya tanpa melanggar kefungsian aplikasi .

Walau bagaimanapun, kami tidak boleh mencapai pengasingan dan kebebasan sepenuhnya antara komponen aplikasi. Pada satu ketika, mereka perlu berkomunikasi antara satu sama lain: menukar beberapa data, menukar keadaan aplikasi, dll. Oleh itu, adalah penting untuk kita mempelajari cara melakukan komunikasi ini dengan betul sambil memastikan aplikasi berfungsi, fleksibel dan berskala.

Gambaran keseluruhan komunikasi komponen Vue.js

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

1. Komunikasi langsung ibu bapa-anak, berdasarkan hubungan ibu bapa-anak dan anak-ibu bapa yang ketat.
2. Komunikasi merentas komponen, di mana satu komponen boleh "bercakap" dengan mana-mana komponen lain, tanpa mengira hubungan mereka.

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

Komunikasi langsung ibu bapa-anak

Model standard untuk komunikasi komponen yang disokong oleh Vue.js di luar kotak ialah model ibu bapa-anak yang dilaksanakan melalui prop dan acara tersuai. Dalam imej di bawah anda boleh melihat model ini dalam tindakan secara visual.

Seperti yang anda lihat, ibu bapa hanya boleh berkomunikasi dengan anak langsungnya, dan anak hanya boleh berkomunikasi secara langsung dengan ibu bapanya. Dalam model ini, komunikasi rakan sebaya atau merentas komponen tidak dapat dilakukan.

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

Komunikasi ibu bapa-anak

Katakan komponen yang kita ada adalah sebahagian daripada permainan. Kebanyakan permainan memaparkan skor permainan di suatu tempat dalam antara muka. Bayangkan kita mengisytiharkan pembolehubah skor dalam komponen Parent A, dan kami mahu memilikinya dalam komponen score 变量，并且我们希望在 Child A 组件中显示它。那么，我们怎样才能做到这一点呢？

为了将数据从父级发送到子级，Vue.js 使用 props。传递属性需要三个必要步骤：

1. 在子级中注册属性，如下所示：props: ["score"]
2. 使用子模板中注册的属性，如下所示：<span>分数：{{ Score }}</span>
3. 将该属性绑定到 score 变量（在父级模板中），如下所示：<child-a :score="score"></child-a>

让我们探索一个完整的示例，以更好地了解实际发生的情况：

// HTML part

<div id="app">
  <grand-parent/>
</div>

// JavaScript part

Vue.component('ChildB',{
  template:`
    <div id="child-b">
      <h2>Child B</h2>
      <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data {{ this.$data }}

Salin selepas log masuk

Salin selepas log masuk