Bileşenler için özel olaylar

  • 4 dakika

HTML öğeleri, kullanıcı etkileşimi temelinde olayları tetikleyebilir. Bileşenler, olayları yayarak aynı şeyi yapmanıza olanak sağlar. Üst bileşen daha sonra bu olayları, bir düğmenin tıklama olayını dinlemek için kod ekleyeceğiniz şekilde işleyebilir.

Olayları kaydetme

Bir bileşen oluşturduğunuzda, bileşeninizin yayabileceği olayları alanında scriptlisteleyerek emits kaydedersiniz:

<!-- inside the component's vue file -->
<script>
export default {
    name: 'Demo',
    emits: ['userUpdated']
}
</script>

Olayları yayma

işlevini kullanarak bir olay yayarsınız $emit . Bir HTML denetiminin doğrudan tetiklediği bir olayı yaymak istiyorsanız, bu işlemi satır içinde gerçekleştirebilirsiniz. Bir düğme için olay işleyicisini userUpdated kaydederek olayı nasıl yayabileceğinize click dikkat edin:

<!-- inside the component's vue file -->
<template>
    <button @click="$emit('userUpdated')">Save user</button>
</template>

Dekont

kısayolunu @clickkullanıyorsunuz. Bu, genellikle Vue'daki olay işleyicilerini nasıl bağladığınızdır.

Bazen, olayı yaymadan önce daha fazla adım gerçekleştirmeniz gerekebilir. Bileşeninizin güncelleştirilmiş bilgileri döndürmeden önce değeri veritabanına kaydetmesi gerekiyorsa, bir yöntem ekleyebilirsiniz. yönteminin içinde, olayı daha önce yaptığınız gibi yükseltmek için kullanabilirsiniz this.$emit :

<!-- inside the component's vue file -->
<template>
    <button @click="saveUser">Save user</button>
</template>
<script>
export default {
    name: 'UserDialog',
    emits: ['userUpdated'],
    methods: {
        saveUser() {
            // perform other operations
            this.$emit('userUpdated'); // emits event
        }
    }
}
</script>

Olayları verilerle yayma

Bileşenin olaylar aracılığıyla üst öğeye veri döndürmesi gerekebilir. diğer parametreleri 'ye $emitgeçirerek tüm verileri döndürebilirsiniz. döndürerek truegüncelleştirmenin başarılı olduğunu belirtmek istiyorsanız, çağrıyı şu şekilde güncelleştirebilirsiniz:

<button @click="$emit('userUpdated', true)">Save user</button>

Veya bir yöntem kullanabilirsiniz:

methods: {
    saveUser() {
        // perform other operations
        this.$emit('userUpdated', true); // emits event
    }
}

Olayları dinleme

Bir bileşen tarafından yayılan bir olayı dinlemek, normal HTML denetimleri tarafından tetiklenen olayları dinlemeye benzer. Genellikle üst bileşende bir yöntem oluşturursunuz ve ardından veya diğer olaylar için @click yaptığınız söz dizimini @<event-name> kullanarak yöntemi olaya bağlarsınız. Olay herhangi bir veri döndürürse, işleve parametre olarak geçirilir.

Daha önce oluşturduğunuz olaya bir olay işleyicisi eklemek için userUpdated aşağıdaki kodu kullanabilirsiniz. Vue.js dosyasının camelCase adından kebab-case adına nasıl dönüştürüldüğüne dikkat edin.

<template>
<user-dialog @user-updated="handleUserUpdated"></user-dialog>
</template>
<script>
import UserDialog from './UserDialog.vue';
export default {
    methods: {
        handleUserUpdated(success) {
            if (success) {
                alert('It worked!!');
            } else {
                alert('Something went wrong');
            }
        }
    },
    components: {
        UserDialog
    }
}