Bagaimana untuk menghantar nilai antara komponen induk dan anak Vue? Pengenalan kepada kaedah komunikasi

Vue ialah rangka kerja pembangunan bahagian hadapan yang biasa digunakan, dan idea pembahagian ialah teras Vue. Teras idea komponenisasi adalah untuk membahagikan komponen kepada komponen untuk menjadikan komponen kompleks lebih jelas dan lebih mudah diselenggara. Apa yang kami mahu lakukan pada masa ini adalah untuk berkomunikasi antara komponen ini Meluluskan kaedah daripada komponen induk kepada komponen anak adalah teknologi yang penting. Artikel ini akan memperkenalkan cara menghantar kaedah antara komponen Vue, khususnya daripada komponen induk kepada komponen anak.

1. Kaedah lulus komponen induk

Pertama sekali, terdapat banyak cara untuk komponen induk menghantar kaedah kepada komponen anak dalam Vue Mari kita lihat contoh paling mudah dahulu.

Pertama, kami mentakrifkan kaedah dalam komponen induk:

methods: {
    hello(){
        console.log('hello');
    }
}

Seterusnya, kami perlu menghantar kaedah ini kepada komponen anak. Dalam Vue, komponen induk boleh menghantar data dan kaedah kepada komponen anak melalui prop.

Dalam komponen induk, kita perlu lulus kaedah dengan cara berikut:

<child-component :hello="hello"></child-component>

Dalam komponen anak, kita perlu menerima kaedah yang diluluskan oleh komponen induk melalui prop:

props: {
    hello: Function
}

Seterusnya, kita perlu memanggil kaedah dalam komponen anak:

<button @click="hello()">Click me</button>

Dengan cara ini, kita boleh berjaya memanggil kaedah yang diluluskan oleh komponen induk dalam komponen anak .

2. Komponen anak menghantar kaedah kepada komponen induk

Seterusnya, kami memperkenalkan cara komponen anak menghantar kaedah kepada komponen induk. Berbanding dengan cara komponen induk menghantar kaedah kepada komponen anak, kaedah ini lebih rumit.

Pertama, dalam subkomponen kami mentakrifkan kaedah:

methods: {
    send(){
        this.$emit('demo-event');
    }
}

Di sini, kami mentakrifkan kaedah penghantaran, yang mencetuskan peristiwa yang dipanggil acara "demo-event melalui $emit". Perlu diingatkan bahawa apabila kita lulus kaedah dalam Vue, kita tidak lulus fungsi itu sendiri secara langsung, tetapi meneruskannya melalui acara.

Seterusnya, kita perlu mendengar acara dalam komponen induk Kod khusus adalah seperti berikut:

<child-component @demo-event="handleDemo"></child-component>

Di sini, kami menggunakan @demo-event untuk mendengar "demo. - "dicetuskan oleh komponen kanak-kanak. acara" peristiwa, dan fungsi pengendalian peristiwa handleDemo ditakrifkan dalam komponen induk.

Seterusnya, kita perlu menentukan kaedah handleDemo dalam komponen induk:

methods: {
    handleDemo(){
        console.log('demo event received');
    }
}

Dengan cara ini, apabila kaedah hantar dicetuskan dalam komponen anak, "peristiwa demo" acara akan dicetuskan, dan kemudian Jalankan kaedah handleDemo.

3. Ringkasan

Melalui dua kaedah di atas, kita boleh menghantar kaedah antara komponen Vue dan komunikasi lengkap untuk mencapai penggunaan semula komponen dan pemisahan halaman yang kompleks. Dalam projek sebenar, kami sering menggunakan kaedah ini untuk berkomunikasi antara komponen.

Perlu diingat bahawa cara untuk lulus kaedah dalam Vue adalah melalui acara, yang juga merupakan konsep yang sangat penting dalam komponenisasi Vue. Pada masa yang sama, apabila menggunakan kaedah ini, anda juga perlu memberi perhatian kepada nama kaedah yang ditakrifkan dalam komponen induk dan komponen anak adalah sama untuk memastikan acara itu boleh dicetuskan dengan jayanya.

Atas ialah kandungan terperinci Bagaimana untuk menghantar nilai antara komponen induk dan anak Vue? Pengenalan kepada kaedah komunikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!