Önceki

Sonraki

Bileşen prop'ları

Tamamlandı

HTML öğeleri, sayfa oluşturmaya yönelik yapı taşlarıdır. Öznitelikleri farklı değerlere ayarlayarak davranışlarını yapılandırabilirsiniz. Daha önce vurgulandığı gibi, bileşen oluşturmak özel HTML etiketi oluşturmaya benzer. Sonuç olarak, prop'lar aracılığıyla bileşenlerin yeniden kullanılmasını geliştirmek için bilgileri geçirebilirsiniz.

Prop'ları tanımlama

Özellikler için kullanılan prop'lar, bir bileşene geçirebileceğiniz bir değer kümesidir. Genellikle bir bileşenin görüntülemesi veya davranışını değiştirmesi gereken değerleri geçirmek için bileşene prop eklersiniz.

Öğesinin içine script alanını ekleyerek props bir bileşen için prop'ları tanımlarsınız. Bir bileşenin props adlarını bir dizide listeleyerek listeleyebilirsiniz:

<!-- UserDisplay component -->
<script>
export default {
    name: 'UserDisplay',
    props: ['name', 'age']
}
</script>

Bileşen kümelerinin çağıranı, HTML özniteliğiyle aynı söz dizimini kullanarak yayılır. Önceki bileşeni varsayarsak şunu ayarlayabilir name ve age beğenebiliriz:

<!-- inside parent component -->
<template>
    <user-display name='Cheryl' age='28'></user-display>
</template>
<script>
import UserDisplay from './UserDisplay.vue';
export default {
    components: {
        UserDisplay
    }
}
</script>

ve 28 değerleriCheryl, öznitelik bağlaması name aracılığıyla sırasıyla ve age özelliğine bağlıdır.

Dekont

Vue.js adlı UserDisplay bileşeni kebab-cased user-displayöğesine dönüştürür.

Türleri kısıtlama

Çağıran, herhangi bir türdeki değerleri bir dizinin parçası olarak listeleyerek geçirebilir. Bu yöntem temel uygulamalar için uygun olabilir, ancak genellikle her destek için beklediğiniz veri türlerini belirtmek istersiniz.

Şema tanımlayarak destek özellikleri hakkında daha sağlam bilgiler sağlayabilirsiniz. Bunun bir dize ve age bir sayı olması gerektiğini belirtmek name istiyorsanız, prop şemanızı aşağıdaki gibi tanımlayabilirsiniz:

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        name: String,
        age: Number
    }
}
</script>

ve agetürleriyle name bir prop nesnesi oluşturduğunuza dikkat edin. Bu bileşen artık yalnızca belirtilen veri türlerini kabul edecek. Yine de bunları daha önce olduğu gibi ayarlayabilirsiniz:

<!-- inside parent component -->
<user-display name='Cheryl' age='28'></user-display>

Ancak, veri türlerini şemayla eşleşmeyen değerlere ayarlarsanız (örneğin, bir sayıyı 'a namegeçirirseniz) konsolunda bir uyarı alırsınız. Uyarı sizden işlem yapmanız istenir.

Karmaşık nesneler

Vue ile çalışırken genellikle tek tek değerler yerine nesnelerle çalışırsınız. Neyse ki, prop'larla karmaşık yapılar bildirebilirsiniz.

ve ageözelliklerine name sahip bir User nesne kullanıyorsanız, bu nesneyi prop'larınızda tam bir yapı olarak bildirebilirsiniz:

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>

Değerini daha önce yaptığınız gibi özniteliğini kullanarak ayarlayabilirsiniz. Ayrıca, kullanmak istediğiniz nesnenin adını belirterek dinamik verileri geçirebilirsiniz. Aşağıdaki örnekte, statik değerlerle aynı söz dizimi kullanılarak adlı user bir veri parçası geçirilir:

<!-- parent component -->
<template>
<user-display :user="user"></user-display>
</template>

<script>
import UserDisplay from './UserDisplay.vue';
export default {
    data() {
        return {
            user: {
                firstName: 'Cheryl',
                age: 28
            }
        }
    },
    components: {
        UserDisplay
    }
}
</script>

Bileşen içinde prop kullanma

Bir bileşenin içinde, prop'lar verileri okuduğunuz gibi okunabilir. Bileşenin tamamı UserDisplay şöyle görünebilir:

<template>
    <div>Name: {{ user.name }}</div>
    <div>Age: {{ user.age }}</div>
</template>
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>

Önemli

Durum bilgisi olan verilerden farklı olarak, props aracılığıyla geçirilen değerler tek yönlü bir bağlamadır. Bir destek öğesinde değişiklik yapılırsa, bu güncelleştirmeler üst öğeye geri dönmez.

Devam et