Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

perkenalan

Vue 3 memperkenalkan Composition API, yang menghadirkan fleksibilitas dan kekuatan baru pada komunikasi komponen.

Dasar-dasar komunikasi komponen

Pengertian dan Fungsi Komponen

Dalam pengembangan front-end, komponen dapat dianggap sebagai unit independen yang membangun antarmuka pengguna. Ini merangkum fungsionalitas dan gaya tertentu, dapat digunakan kembali, dan dapat dikembangkan dan diuji secara independen dari bagian lain. Fungsi utama komponen adalah untuk meningkatkan penggunaan kembali kode, pemeliharaan, dan skalabilitas. Dengan membagi antarmuka menjadi beberapa komponen, pengembang dapat lebih mudah mengelola aplikasi yang kompleks, dan setiap komponen dapat dioptimalkan untuk meningkatkan efisiensi pengembangan dan kinerja aplikasi secara keseluruhan.

Pohon komponen dan hubungan komponen induk-anak

Dalam kerangka front-end seperti Vue.js, komponen dapat disarangkan untuk membentuk pohon komponen. Dalam struktur pohon ini, setiap komponen dapat memiliki subkomponen, dan subkomponen tersebut dapat memiliki subkomponennya sendiri sehingga membentuk struktur hierarki. Struktur ini membuat hubungan antar komponen menjadi jelas dan memudahkan pengelolaan dan pemeliharaan.

• Hubungan komponen orang tua-anak : Pada pohon komponen, suatu komponen dapat membuat komponen lain, dalam hal ini pembuatnya disebut komponen induk, dan komponen yang dibuat disebut komponen anak. Komponen induk dapat meneruskan data dan metode ke komponen anak, dan komponen anak dapat mengirimkan informasi ke komponen induk melalui peristiwa. Hubungan orang tua-anak ini adalah dasar dari komponen komunikasi.
• Hubungan komponen saudara : Beberapa komponen anak di bawah komponen induk yang sama merupakan hubungan komponen saudara. Komponen saudara tidak dapat berkomunikasi secara langsung satu sama lain, dan komunikasi antar komponen biasanya perlu disampaikan melalui komponen induk.
• Hubungan komponen leluhur dan keturunan : Pada pohon komponen, komponen induk dari komponen induk adalah komponen leluhur, dan komponen anak dari komponen anak adalah komponen turunan. Hubungan ini sangat penting ketika berhadapan dengan komponen yang sangat bertumpuk.

Konsep pohon komponen dan hubungan komponen orang tua-anak sangat penting untuk memahami komunikasi komponen. Menguasai pengetahuan dasar ini dapat membantu pengembang merancang dan mengimplementasikan mekanisme komunikasi antar komponen dengan lebih efektif.

Komunikasi komponen orang tua-anak (Vue 3)

Orang tua meneruskan data ke anak (Alat Peraga)

Apa itu alat peraga
Props adalah mekanisme komponen induk untuk meneruskan data ke komponen anak.Di Vue 3, gunakandefinePropsAPI digunakan untuk mendeklarasikan props penerima, yang menjaga aliran data satu arah dan memastikan independensi dan penggunaan kembali komponen.

Cara meneruskan props di komponen induk
Di templat komponen induk, gunakanv-bindatau singkatan:Untuk mengikat data:

<template>
   <ChildComponent :my-prop="parentData" />
</template>

Di Sini,:my-propMenunjukkan bahwa ini adalah prop yang terikat secara dinamis,parentDataApakah data ditentukan dalam komponen induk。

Cara menerima props di komponen anak
Di komponen anak, gunakandefinePropsUntuk mendeklarasikan props yang diterima:

<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
   myProp: String
});
</script>

ada<script setup>Dalam gula sintaksis,definePropsSecara otomatis akan mengekspos props sebagai properti responsif komponen。

Anak meneruskan acara ke orang tua (Emit)

apa yang dipancarkan
Emit adalah mekanisme komponen anak untuk mengirim pesan ke komponen induk.Di Vue 3, gunakandefineEmitsAPI untuk mendeklarasikan peristiwa yang dapat dipancarkan, dan digunakanemitberfungsi untuk memicu peristiwa.

Cara memicu peristiwa di komponen anak
Dalam metode komponen anak, gunakan defineEmits untuk mendeklarasikan peristiwa yang dapat dipancarkan, dan digunakan emit untuk memicu:

<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['my-event']);
 
function triggerEvent() {
   emit('my-event', dataToPass);
}
</script>

defineEmitsdigunakan untuk mendeklarasikan event yang dapat dikeluarkan oleh suatu komponen, sementaraemitFungsi digunakan untuk memicu peristiwa ini.

Cara mendengarkan peristiwa komponen anak di komponen induk
Dalam templat komponen induk,menggunakanv-onatau singkatan@ Untuk mendengarkan kejadian yang dikeluarkan oleh komponen anak:

<template>
   <ChildComponent @my-event="handleEvent" />
//或者<ChildComponent v-on:my-event="handleEvent" />
</template>

Di Sini,@my-eventMenunjukkan bahwa subkomponen mendengarkan memancarkanmy-eventperistiwa,handleEventIni adalah metode yang ditentukan dalam komponen induk. Ketika peristiwa dipicu, metode ini akan dipanggil.

Contoh yang komprehensif

Asumsikan ada komponen indukParentComponentdan subkomponenChildComponent, komponen induk perlu meneruskan data ke komponen anak, dan komponen anak perlu memberi tahu komponen induk setelah operasi tertentu.

komponen indukParentComponent.vue

<template>
   <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('initial data');
const handleChildEvent = (data) => {
   console.log('Received data from child:', data);
};
</script>

SubperakitanChildComponent.vue

<template>
   <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps({
   myProp: String
});
 
const emit = defineEmits(['child-event']);
 
function sendDataToParent() {
   emit('child-event', props.myProp);
}
</script>

Dalam contoh ini, komponen induk lolos:my-propTeruskan data ke komponen anak dan teruskan@child-event Dengarkan peristiwa yang dikeluarkan oleh komponen anak.komponen anak lolosdefinePropsMenerima konten yang diteruskan oleh komponen indukmyProp, dan menggunakannya dalam acara klik tombolemitKirim data ke komponen induk.

Menggunakan Pinia (perpustakaan manajemen negara untuk Vue 3)

Keunggulan dan fitur Pinia

Pinia adalah pustaka manajemen status yang direkomendasikan secara resmi untuk Vue 3. Pinia menyediakan cara berbasis komponen untuk mengelola status aplikasi. Berikut adalah beberapa manfaat dan fitur utama Pinia:

• API Komponen: Pinia mengadopsi API berbasis komponen, menjadikan pemisahan manajemen negara dan logika komponen lebih alami.
• Dukungan TypeScript: Pinia telah mempertimbangkan dukungan TypeScript sejak awal, memungkinkan inferensi tipe dan dukungan editor yang lebih baik saat mengembangkan dengan TypeScript.
• Modular: Pinia memungkinkan Anda membagi status menjadi beberapa penyimpanan, dan setiap toko dapat mengelola status dan logikanya sendiri secara mandiri.
• Kompatibel dengan API komposit: Pinia terintegrasi sempurna dengan Composition API Vue 3, menjadikan pemisahan manajemen status dan logika komponen menjadi lebih alami.
• Debug perjalanan waktu: Pinia menyediakan kemampuan debugging perjalanan waktu, memungkinkan pengembang dengan mudah menelusuri kembali dan memeriksa perubahan keadaan.

Cara mengatur dan menggunakan Pinia

Untuk mulai menggunakan Pinia, Anda perlu menginstal Pinia terlebih dahulu:

npm install pinia

Atau gunakan Benang:

yarn add pinia

Kemudian, atur Pinia di aplikasi Vue Anda:

import { createPinia } from 'pinia';
 
const pinia = createPinia();
app.use(pinia);

Buat toko:

import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
 
    function increment() {
        count.value++;
    }
 
    return { count, increment };
});

Gunakan toko di komponen:

<script setup>
import { useCounterStore } from '@/stores/counter';
 
const counterStore = useCounterStore();
</script>
 
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Increment</button>
    </div>
</template>

Integrasi Pinia dengan komponen

Integrasi Pinia dengan komponen sangat sederhana, terutama melaluidefineStore berfungsi untuk membuat toko. Di komponen, Anda dapat langsung menggunakan status dan metode di penyimpanan:

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter';
 
 
const counterStore = useCounterStore();
const { count, increment } = storeToRefs(counterStore);
//如果这里不使用storeToRefs会丢失响应式特性
</script>

Pada contoh di atas, kita mengakses langsung di templatecountuntuk menampilkan nilai penghitung dan memanggilnya di acara klik tombolincrementMetode untuk menaikkan nilai penghitung.

Vue 3 metode komunikasi unik

Menyediakan/Menyuntikkan

Penggunaan dasar Menyediakan/Menyuntikkan
Di Vue 3,provideDaninjectIni adalah metode komunikasi antara komponen induk dan anak yang memungkinkan komponen leluhur memasukkan ketergantungan ke semua komponen turunannya, terlepas dari seberapa dalam hierarki komponennya.

• menyediakan data: Penggunaan komponen leluhurprovideFungsi menyediakan data.
• Suntikkan data: digunakan oleh komponen turunaninjectFungsi menyuntikkan data.

Skenario yang berlaku untuk Menyediakan/Menyuntikkan
provideDaninjectBerlaku untuk skenario berikut:

• Bila Anda ingin menghindari melewati banyak lapisanpropssaat meneruskan data.
• Bila Anda ingin beberapa komponen di pohon komponen berbagi data.

Kode sampel：

// 祖先组件
export default {
  setup() {
    const message = 'Hello from Ancestor!';
    provide('message', message);
  }
}
 
// 子孙组件
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Teleportasi

Konsep dan penggunaan Teleportasi
TeleportIni adalah komponen bawaan baru yang ditambahkan di Vue 3, yang memungkinkan Anda untuk "mentransmisikan" bagian dari template di dalam komponen ke lokasi lain di DOM.

Cara menggunakan Teleportasi untuk komunikasi komponen
Teleport Ini tidak digunakan untuk komunikasi antar komponen, tetapi untuk mengontrol posisi rendering komponen.tapi kamu bisa menggunakannyaTeleportMetode komunikasi khusus dicapai dengan merender bagian komponen ke dalam DOM komponen induk.

Kode sampel：

<!-- 父组件 -->
<template>
  <div>
    <Teleport to="body">
      <ChildComponent />
    </Teleport>
  </div>
</template>
 
<!-- 子组件 -->
<template>
  <div>Some content</div>
</template>

API Komposisi

Pengantar API Komposisi
Vue 3 memperkenalkan Composition API, yang menyediakan cara baru untuk mengatur dan menggunakan kembali logika.lulussetupFungsi memungkinkan pengembang untuk lebih fleksibel mengontrol status responsif dan siklus hidup komponen.

Gunakan ref dan reaktif untuk komunikasi antar komponen
refDanreactiveIni adalah alat di Composition API untuk membuat data responsif.

• refReferensi reaktif untuk membuat tipe data dasar.
• reactiveReferensi reaktif untuk membuat tipe objek.

Menggunakan penyediaan dan injeksi di API Komposisi
Di API Komposisi,provideDaninjectdiperbolehkansetupDigunakan dalam fungsi untuk mencapai komunikasi lintas komponen.

Kode sampel：

// 祖先组件
import { provide } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('message', message);
  }
}
 
// 子孙组件
import { inject } from 'vue';
 
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Melalui metode komunikasi unik Vue 3 ini, pengembang dapat lebih fleksibel mengatur komunikasi antar komponen dan meningkatkan pemeliharaan dan penggunaan kembali kode.

Meringkaskan

Vue 3 memperkenalkan Composition API, yang menghadirkan fleksibilitas baru dan fitur canggih pada komunikasi komponen. Komunikasi komponen adalah kunci untuk membangun antarmuka pengguna yang kompleks dalam pengembangan front-end. Ini melibatkan transfer data dan pemicu peristiwa antara komponen induk dan anak, komponen saudara, serta komponen leluhur dan keturunan. Vue 3 menyediakan berbagai metode komunikasi, termasuk props dan emit tradisional, serta Provide/Inject, Teleport, dan Composition API yang baru.

Informasi terkait yang direkomendasikan

• Dokumentasi resmi Vue 3：Vue.js - Kerangka JavaScript Progresif | Vue.js- Dokumentasi resmi adalah sumber paling otoritatif untuk mempelajari Vue 3, termasuk panduan terperinci dan referensi API.
• Tutorial API Komposisi Vue.js 3：Tanya Jawab API Komposisi | Vue.js- Tutorial API Komposisi Resmi untuk membantu Anda memulai dengan cepat.
• Dokumentasi resmi Pinia：Pinia | Toko intuitif untuk Vue.js- Jika Anda berencana menggunakan Pinia untuk pengelolaan negara, dokumentasi resmi Pinia adalah sumber belajar terbaik.
• Teknologi Vue.js terungkap：Kata Pengantar |. Teknologi Vue.js terungkap- Ini adalah proyek yang menganalisis secara mendalam mekanisme internal Vue.js, yang membantu untuk memahami cara kerja Vue.

Pembuatannya tidak mudah. ​​Jika artikel ini membantu Anda, bisakah Anda memberi saya suka?