Template Refs ​

যদিও Vue-এর ডিক্লেয়ার রেন্ডারিং মডেল আপনার জন্য বেশিরভাগ সরাসরি DOM ক্রিয়াকলাপগুলিকে বিমূর্ত করে দেয়, তখনও এমন কিছু ক্ষেত্রে হতে পারে যেখানে আমাদের অন্তর্নিহিত DOM কম্পোনেন্টগুলিতে সরাসরি অ্যাক্সেসের প্রয়োজন। এটি অর্জন করতে, আমরা বিশেষ ref বৈশিষ্ট্য ব্যবহার করতে পারি:

<input ref="input">

ref একটি বিশেষ বৈশিষ্ট্য, v-for অধ্যায়ে আলোচিত key বৈশিষ্ট্যের অনুরূপ। এটি মাউন্ট করার পরে এটি আমাদের একটি নির্দিষ্ট DOM কম্পোনেন্ট বা চাইল্ড কম্পোনেন্ট ইনস্ট্যান্সের সরাসরি রেফারেন্স পেতে দেয়। এটি উপযোগী হতে পারে যখন আপনি চান, উদাহরণস্বরূপ, প্রোগ্রাম্যাটিকভাবে কম্পোনেন্ট মাউন্টে একটি ইনপুট ফোকাস করতে, বা একটি কম্পোনেন্টে একটি 3য় পক্ষের লাইব্রেরি শুরু করতে।

Accessing the Refs ​

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

// the first argument must match the ref value in the template
const input = useTemplateRef('my-input')

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

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

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

// declare a ref to hold the element reference
// the name must match template ref value
const input = ref(null)

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

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

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

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

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

মনে রাখবেন যে আপনি শুধুমাত্র রেফারেন্স অ্যাক্সেস করতে পারবেন কম্পোনেন্ট মাউন্ট করার পরে। আপনি যদি একটি টেমপ্লেট এক্সপ্রেশনে $refs.inputইনপুট অ্যাক্সেস করার চেষ্টা করেন, তাহলে তা হবে প্রথম রেন্ডারে undefinednull কারণ প্রথম রেন্ডার না হওয়া পর্যন্ত কম্পোনেন্টটির অস্তিত্ব নেই!

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // not mounted yet, or the element was unmounted (e.g. by v-if)
  }
})

Refs inside v-for ​

Requires v3.5 or above

<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>

<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>

<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>

এটা উল্লেখ করা উচিত যে রেফ অ্যারে সোর্স অ্যারের মতো একই অর্ডারের নিশ্চয়তা না দেয়।

Function Refs ​

একটি স্ট্রিং কী এর পরিবর্তে, ref অ্যাট্রিবিউটটি একটি ফাংশনের সাথেও আবদ্ধ হতে পারে, যা প্রতিটি কম্পোনেন্ট আপডেটে কল করা হবে এবং আপনাকে কম্পোনেন্টের রেফারেন্স কোথায় সংরক্ষণ করতে হবে সে সম্পর্কে সম্পূর্ণ ফ্লেক্সিবল দেয়। ফাংশন প্রথম যুক্তি হিসাবে কম্পোনেন্ট রেফারেন্স গ্রহণ করে:

<input :ref="(el) => { /* assign el to a property or ref */ }">

মনে রাখবেন আমরা একটি ডায়নামিক :ref বাইন্ডিং ব্যবহার করছি যাতে আমরা এটিকে রেফ নামের স্ট্রিংয়ের পরিবর্তে একটি ফাংশন পাস করতে পারি। যখন কম্পোনেন্টটি আনমাউন্ট করা হয়, আর্গুমেন্টটি হবে null। আপনি, অবশ্যই, ইনলাইন ফাংশনের পরিবর্তে একটি পদ্ধতি ব্যবহার করতে পারেন।

Ref on Component ​

এই বিভাগটি Components সম্পর্কে জ্ঞান গ্রহণ করে। নির্দ্বিধায় এটি এড়িয়ে যান এবং পরে ফিরে আসুন।

ref একটি child কম্পোনেন্টেও ব্যবহার করা যেতে পারে। এই ক্ষেত্রে রেফারেন্স একটি কম্পোনেন্ট উদাহরণ যে হবে:

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

const childRef = useTemplateRef('child')

onMounted(() => {
  // childRef.value will hold an instance of <Child />
})
</script>

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

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

const child = ref(null)

onMounted(() => {
  // child.value will hold an instance of <Child />
})
</script>

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

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

export default {
  components: {
    Child
  },
  mounted() {
    // this.$refs.child will hold an instance of <Child />
  }
}
</script>

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

যদি চাইল্ড কম্পোনেন্ট Options API ব্যবহার করে বা <script setup> ব্যবহার না করে, তাহলেদি রেফারেন্স করা উদাহরণ চাইল্ড কম্পোনেন্টের 'এই'-এর সাথে অভিন্ন হবে, যার মানে প্যারেন্ট কম্পোনেন্টের চাইল্ড কম্পোনেন্টের প্রতিটি কম্পিউটেড প্রপার্টি এবং পদ্ধতিতে সম্পূর্ণ অ্যাক্সেস থাকবে। এটি পিতামাতা এবং সন্তানের মধ্যে দৃঢ়ভাবে সংযুক্ত বাস্তবায়নের বিশদ তৈরি করা সহজ করে তোলে, তাই কম্পোনেন্ট রেফ শুধুমাত্র যখন একেবারে প্রয়োজন হয় তখনই ব্যবহার করা উচিত - বেশিরভাগ ক্ষেত্রে, আপনাকে স্ট্যান্ডার্ড প্রপস ব্যবহার করে অভিভাবক/ চাইল্ড মিথস্ক্রিয়া প্রয়োগ করার চেষ্টা করা উচিত এবং প্রথমে ইন্টারফেস নির্গত করার চেষ্টা করা উচিত।

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

const a = 1
const b = ref(2)

// Compiler macros, such as defineExpose, don't need to be imported
defineExpose({
  a,
  b
})
</script>

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