Yerleşik Özel Elemanlar

Bileşenler Değil

, ve `` bileşen benzeri özelliklerdir ve şablon sentaksının bir parçasıdır. Bunlar gerçek bileşenler değildir ve şablon derleme sırasında derlenir. Bu nedenle, geleneksel olarak şablonlarda küçük harfle yazılırlar.

``

Dinamik bileşenleri veya elemanları render etmek için kullanılan "meta bileşen".

Props

interface DynamicComponentProps {
  is: string | Component
}

Detaylar
Render edilecek gerçek bileşen is prop'u ile belirlenir.
- is bir string olduğunda, ya bir HTML tag adı ya da bir bileşenin kaydedilmiş adı olabilir.
- Alternatif olarak, is doğrudan bir bileşenin tanımına bağlanabilir.
Örnek
Kaydedilmiş isimle bileşenleri render etme (Options API):
```
<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: { Foo, Bar },
  data() {
    return {
      view: 'Foo'
    }
  }
}
</script>

<template>
  <component :is="view" />
</template>
```
Tanımlama ile bileşenleri render etme (Composition API ile ``):
```
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Math.random() > 0.5 ? Foo : Bar" />
</template>
```
HTML elemanlarını render etme:
```
<component :is="href ? 'a' : 'span'"></component>
```
Yerleşik bileşenler is prop'una verilebilir, ancak isimle geçmek istiyorsanız bunları kaydetmeniz gerekir. Örneğin:
```
<script>
import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup
  }
}
</script>

<template>
  <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
    ...
  </component>
</template>
```
is prop'una bileşeni ismi yerine kendisi olarak geçerseniz, kaydetme gerekmez; örneğin `` içinde.
etiketi üzerinde `v-model` kullanıldığında, şablon derleyici bunu `modelValue` prop'u ve `update:modelValue` olay dinleyicisine genişletir; bu, başka bileşenler için olduğu gibi olur. Ancak bu, veya `gibi yerel HTML elemanlarıyla uyumlu olmayacaktır. Sonuç olarak, dinamik olarak oluşturulmuş yerel bir elemanlav-model` kullanımı çalışmayacaktır:
```
<script setup>
import { ref } from 'vue'

const tag = ref('input')
const username = ref('')
</script>

<template>
  
  <component :is="tag" v-model="username" />
</template>
```
Pratikte, bu ucuz durum yaygın değildir çünkü yerel form alanları genelde gerçek uygulamalarda bileşenlerin içine sarılır. Eğer doğrudan bir yerel elemanı kullanmanız gerekiyorsa, v-model'i manuel olarak bir özellik ve etkinlik olarak bölebilirsiniz.
Ayrıca bkz. Dinamik Bileşenler

``

Şablonlarda slot içerik çıkışlarını belirtir.

Props

interface SlotProps {
  /**
   * <slot> etiketine geçirilen herhangi bir props,
   * kapsamlı slotlar için argümanlar olarak geçilecektir
   */
  [key: string]: any
  /**
   * Slot adını belirtmek için ayrılmıştır.
   */
  name?: string
}

Detaylar
`elementi, bir slot adını belirtmek içinnameniteliğini kullanabilir.name` belirtilmediğinde, varsayılan slot render edilir. Slot elementine geçirilen ek nitelikler, ana kapsamlı slot için slot props olarak geçilecektir.
Elementin kendisi eşleşen slot içeriğiyle değiştirilir.
Vue şablonlarındaki elemanları JavaScript'e derlenir, bu nedenle bunlar [yerel elemanları](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) ile karıştırılmamalıdır.
Ayrıca bkz. Bileşen - Slotlar

``

`` etiketi, yerleşik bir yönergeyi kullanmak istediğimizde DOM'da bir element render etmeden yer tutucu olarak kullanılır.

Detaylar
`` için özel işleme, yalnızca aşağıdaki yönergelerle kullanıldığında tetiklenir:
- v-if, v-else-if veya v-else
- v-for
- v-slot
Eğer bu yönergelerden hiçbiri mevcut değilse, yerel `` elemanı olarak render edilir.
v-for ile bir `ayrıca birkey niteliğine sahip olabilir. Tüm diğer nitelikler ve yönergeler, eşleşen bir element olmadan anlamlı olmadıkları için kaldırılacaktır.
Tek dosya bileşenleri, tüm şablonu sarmak için üst düzey `` etiketi kullanır. Bu kullanım, yukarıda açıklanan `` kullanımından ayrıdır. O üst düzey etiket şablonun kendisinin bir parçası değildir ve yönerge gibi şablon sentezini desteklemez.
Ayrıca bkz.
- Kılavuz - `` üzerinde v-if`
- Kılavuz - `` üzerinde v-for`
- Kılavuz - Adlandırılmış slotlar

Yerleşik Özel Elemanlar​

``​

``​

``​

Yerleşik Özel Elemanlar

``

``

``