Props

Bir çocuk bileşeni, props aracılığıyla ebeveyninden giriş alabilir. Öncelikle, kabul ettiği props'ları bildirmesi gerekir:

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

not

defineProps() bir derleme zaman makrosudur ve içe aktarım gerektirmez. Bildirildikten sonra, msg prop'u çocuk bileşeninin şablonunda kullanılabilir. Ayrıca, defineProps()'un geri dönen nesnesi aracılığıyla JavaScript'te de erişilebilir.

// çocuk bileşende
export default {
  props: {
    msg: String
  },
  setup(props) {
    // props.msg'e eriş
  }
}

Bildirildikten sonra, msg prop'u this üzerinde açığa çıkar ve çocuk bileşeninin şablonunda kullanılabilir. Alınan props'lar, setup()'a ilk argüman olarak geçirilir.

// çocuk bileşende
export default {
  props: {
    msg: String
  }
}

Bildirildikten sonra, msg prop'u this üzerinde açığa çıkar ve çocuk bileşeninin şablonunda kullanılabilir.

Ebeveyn, prop'u çocuğa tıpkı nitelikler gibi geçirebilir. Dinamik bir değer geçmek için, v-bind sözdizimini de kullanabiliriz:

<ChildComp :msg="greeting" />

<child-comp :msg="greeting"></child-comp>

ipucu

Şimdi bunu editörde kendiniz deneyin.

Props​

Props