Şablon Referansları

Vue'nun deklaratif render modeli, doğrudan DOM işlemlerinin çoğunu sizin için soyutlasa da, hala altındaki DOM unsurlarına doğrudan erişim gerektiren durumlar olabilir. Bunu başarmak için özel ref özniteliğini kullanabiliriz:

<input ref="input">

ref, v-for bölümünde tartışılan key özniteliğine benzer özel bir özniteliktir. Bizi, bir DOM elemanına veya çocuk bileşen örneğine, bileşen yüklendikten sonra doğrudan bir referans almayı sağlar. Bu, örneğin, bileşen yüklendiğinde bir girişi programlı olarak odaklamak veya bir 3. parti kütüphaneyi bir eleman üzerinde başlatmak istediğinizde faydalı olabilir.

Referanslara Erişim

bilgi

Composition API ile referansı elde etmek için useTemplateRef() yardımcı fonksiyonunu kullanabiliriz.

<script setup>
import { useTemplateRef, onMounted } from 'vue'

// ilk argüman, şablondaki ref değeriyle eşleşmelidir
const input = useTemplateRef('my-input')

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>

TypeScript kullanırken, Vue'nun IDE desteği ve vue-tsc, input.value'nin tipini, karşılık gelen ref özniteliği hangi eleman veya bileşende kullanılıyorsa ona göre otomatik olarak çıkarır.

3.5’ten Önceki Kullanım

useTemplateRef()'in tanıtılmadığı 3.5’ten önceki sürümlerde, şablon ref özniteliğinin değeriyle eşleşen bir isimle bir ref tanımlamamız gerekir:

<script setup>
import { ref, onMounted } from 'vue'

// eleman referansını tutmak için bir ref tanımla
// isim, şablon ref değeriyle eşleşmelidir
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

`kullanılmıyorsa,setup()`'tan da ref'i döndürdüğünüzden emin olun:

export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}

Ref'e yalnızca bileşen yüklendikten sonra erişebileceğinizi unutmayın. Bir şablon ifadesinde $refs.input``input erişmeye çalışırsanız, ilk render'da undefined``null olacaktır. Bu, elemanın ilk render'dan sonra var olmadığı içindir!

Bir şablon ref'inin değişikliklerini izlemeye çalışıyorsanız, ref'in null değerine sahip olduğu durumu hesaba almak için dikkatli olun:

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // henüz montelenmedi, veya element unmounted (ör. v-if ile)
  }
})

Ayrıca bakınız: Şablon Referanslarının Tipi

`v-for` İçindeki Referanslar

v3.5 veya üstü gerektirir

v-for içinde ref kullanıldığında, karşılık gelen ref bir dizi değeri içermelidir ve bu değerler montajdan sonra doldurulacaktır:

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = useTemplateRef('items')

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

Playground'da Deneyin

3.5’ten Önceki Kullanım

useTemplateRef()'in tanıtılmadığı 3.5’ten önceki sürümlerde, şablon ref değerine eşleşen bir isimle bir ref tanımlamamız ve ref'in de bir dizi değeri içermesi gerekir:

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

v-for içinde ref kullanıldığında, elde edilen ref değeri, karşılık gelen elemanları içeren bir dizi olacaktır:

<script>
export default {
  data() {
    return {
      list: [
        /* ... */
      ]
    }
  },
  mounted() {
    console.log(this.$refs.items)
  }
}
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

Playground'da Deneyin

Ref dizisinin kaynak dizinin aynı sırasını garanti etmediğini not etmek gerekir.

Fonksiyon Referansları

Bir dizi anahtar yerine, ref özniteliği aynı zamanda her bileşen güncellemesinde çağrılacak bir fonksiyona bağlanabilir ve bu size eleman referansını saklamak için tamamen esneklik sağlar. Fonksiyon ilk argüman olarak eleman referansını alır:

<input :ref="(el) => { /* el'i bir özelliğe veya ref'e atayın */ }">

Dinamik bir :ref bağlaması kullandığımızı unutmayın, bu yüzden ona bir fonksiyon geçirebiliriz, yerine bir ref adı dizesi. Eleman unmounted olduğunda, argüman null olacaktır. Elbette, satır içi fonksiyon yerine bir yöntem de kullanabilirsiniz.

Bileşen Üzerinde Ref

Bu bölüm, Bileşenler hakkında bilgi sahibi olunduğunu varsayar. İsterseniz atlayabilir ve daha sonra geri dönebilirsiniz.

ref, bir çocuk bileşen üzerinde de kullanılabilir. Bu durumda referans bir bileşen örneği olacaktır:

<script setup>
import { useTemplateRef, onMounted } from 'vue'
import Child from './Child.vue'

const childRef = useTemplateRef('child')

onMounted(() => {
  // childRef.value, <Child /> örneğini tutacaktır
})
</script>

<template>
  <Child ref="child" />
</template>

3.5’ten Önceki Kullanım

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value, <Child /> örneğini tutacaktır
})
</script>

<template>
  <Child ref="child" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // this.$refs.child, <Child /> örneğini tutacaktır
  }
}
</script>

<template>
  <Child ref="child" />
</template>

Eğer çocuk bileşen Options API kullanıyorsa veya `kullanmıyorsa,referans alınan örnek, çocuk bileşeninthis` ile aynı olacaktır, bu da demektir ki, üst bileşen her özellik ve metoda tam erişime sahip olacaktır. Bu, üst ve alt bileşenler arasında sıkı bağlı uygulama detayları oluşturmayı kolaylaştırır, bu nedenle bileşen referanslarının yalnızca gerçekten gerekli olduğunda kullanılmalıdır - çoğu durumda, üst / alt etkileşimleri standart props ve emit arayüzlerini kullanarak uygulamayı denemelisiniz.

Burada bir istisna, kullanan bileşenler **varsayılan olarak gizlidir**: üst bileşen, bir çocuk bileşeni ile referans alıyorsa, çocuk bileşenin kamu arayüzünü defineExpose makrosunu kullanarak açmadıkça, herhangi bir şeye erişemeyecektir:

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

// Derleyici makroları, defineExpose gibi, içeri aktarıma ihtiyaç duymaz
defineExpose({
  a,
  b
})
</script>

Bir üst bileşen, bu bileşenin bir şablon referansı aracılığıyla bir örneğini aldığında, alınan örnek { a: number, b: number } şeklinde olacaktır (referanslar, normal örneklerde olduğu gibi otomatik olarak açılacaktır).

Ayrıca bakınız: Bileşen Şablon Referanslarının Tipi

expose seçeneği, bir çocuk örneğine erişimi kısıtlamak için kullanılabilir:

export default {
  expose: ['publicData', 'publicMethod'],
  data() {
    return {
      publicData: 'foo',
      privateData: 'bar'
    }
  },
  methods: {
    publicMethod() {
      /* ... */
    },
    privateMethod() {
      /* ... */
    }
  }
}

Yukarıdaki örnekte, bir üst bileşen, bu bileşeni şablon ref aracılığıyla referans alıyorsa yalnızca publicData ve publicMethod'a erişebilecektir.