Bermula dengan pembangunan VUE3: menggunakan Vue.js untuk berkomunikasi antara komponen

Memandangkan aplikasi web moden terus berkembang dalam kerumitan dan skala, rangka kerja komponen menjadi semakin penting. Vue.js ialah rangka kerja JavaScript popular yang menggunakan pendekatan berasaskan komponen untuk membina aplikasi web. Pengkomponunan membolehkan kami mencipta blok kod yang boleh digunakan semula dan boleh diselenggara dan menggabungkannya ke dalam aplikasi lengkap dengan fungsi yang kompleks. Dalam artikel ini, kita akan membincangkan komunikasi antara komponen VUE3. Ini adalah teknologi kritikal kerana ia membolehkan komponen menghantar maklumat antara satu sama lain supaya mereka boleh bekerjasama dan menyelesaikan tugas.

1. Props
   Dalam VUE3, kami boleh menggunakan Props untuk menghantar data daripada komponen induk kepada komponen anak. Dalam komponen induk, kita boleh menambah atribut pada teg komponen anak, dan dalam komponen anak, kita boleh menggunakan atribut ini. Berikut ialah contoh penggunaan komponen

Vue.component('child-component',{
    props: ['message'],
    template: '<div>{{ message }}</div>'
});

var app = new Vue({
    el: '#app',
    data: {
        parentMessage: 'Hello from parent'
    }
});

Dalam contoh ini, kami mentakrifkan komponen anak yang mengandungi atribut 'props' yang boleh menerima nilai 'parentMessage ' . Dalam komponen induk, kami mengikat 'parentMessage' kepada sifat komponen anak melalui 'v-bind':

<div id="app">
    <child-component v-bind:message="parentMessage"></child-component>
</div>

Arahan 'v-bind' di sini memberitahu VUE3 untuk mengikat nilai 'parentMessage' kepada sifat 'mesej' komponen kanak-kanak.

2. $emit
   Komponen induk dalam VUE3 boleh menggunakan kaedah '$emit' untuk menghantar acara kepada komponen anak. Komponen kanak-kanak boleh mendaftar untuk acara ini menggunakan kaedah '$on'. Berikut ialah contoh menghantar dan menerima acara:

Vue.component('child-component',{
    template: '<button v-on:click="notify">Click me</button>',
    methods:{
        notify: function(){
            this.$emit('clicked');
        }
    }
});

var app = new Vue({
    el: '#app',
    methods:{
        handleClick: function(){
            alert('Button clicked');
        }
    }
});

Dalam contoh ini, komponen kanak-kanak 'child-component' mentakrifkan kaedah 'notify' yang menggunakan '$emit' untuk menghantar Event bernama ' diklik'. Dalam komponen induk, kita boleh menggunakan arahan 'v-on' untuk mengikat acara 'diklik' kepada kaedah 'handleClick':

<div id="app">
    <child-component v-on:clicked="handleClick"></child-component>
</div>

Apabila pengguna mengklik butang komponen anak, ia akan mencetuskan Kaedah 'notify' yang menyebabkan acara 'diklik' dihantar. Kemudian, kaedah 'handleClick' dalam komponen induk akan dipanggil dan kotak pop timbul akan dipaparkan.

3. Bas Acara
   Kadangkala anda mungkin perlu berkongsi data atau acara antara berbilang komponen. Pada masa ini kita boleh menggunakan Bas Acara untuk komunikasi. Bas Acara ialah tika VUE3 yang digunakan untuk mengurus acara dan data dalam aplikasi. Berikut ialah contoh menggunakan Bas Acara:

var bus = new Vue();

Vue.component('component-a',{
    template: '<button v-on:click="triggerEvent">Click me</button>',
    methods:{
        triggerEvent: function(){
            bus.$emit('event-from-a');
        }
    }
});

Vue.component('component-b',{
    template: '<div>{{ message }}</div>',
    data:function(){
        return {
            message: ''
        };
    },
    created:function(){
        var _this = this;
        bus.$on('event-from-a',function(){
            _this.message = 'Received event from Component A';
        });
    }
});

var app = new Vue({
    el: '#app'
});

Dalam contoh ini, kami mencipta tika VUE3 bernama 'bas' dan kemudian menggunakannya dalam dua komponen. Komponen 'komponen-a' mencetuskan peristiwa bernama 'event-from-a' dan menghantarnya ke contoh 'bas', dan komponen 'component-b' mendaftarkan 'event-from-a' dalam 'bas' peristiwa instance, dan mengemas kini sifat 'mesej' dalam 'data' apabila peristiwa itu dicetuskan.

Melalui amalan di atas, anda boleh mengetahui bahawa menggunakan komunikasi komponen VUE3 boleh memindahkan data dan peristiwa dengan mudah antara komponen induk dan anak Pada masa yang sama, Bas Acara menyediakan kaedah mudah untuk berkongsi data antara berbilang komponen dan peristiwa. Dalam amalan, adalah perlu untuk menggunakan kaedah komunikasi komponen secara fleksibel mengikut situasi sebenar projek untuk meningkatkan kecekapan pembangunan dan mencapai fungsi yang diperlukan.

Atas ialah kandungan terperinci Bermula dengan pembangunan VUE3: menggunakan Vue.js untuk berkomunikasi antara komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!