Composition API: Helpers ​

useAttrs() ​

সেটআপ প্রসঙ্গ থেকে attrs অবজেক্ট ফেরত দেয়, যার মধ্যে বর্তমান কম্পোনেন্টের fallthrough বৈশিষ্ট্য অন্তর্ভুক্ত থাকে . এটি <script setup>-এ ব্যবহার করার উদ্দেশ্যে যেখানে সেটআপ প্রসঙ্গ অবজেক্ট উপলব্ধ নেই৷

• Type

  ts

  function useAttrs(): Record<string, unknown>

useSlots() ​

সেটআপ কনটেক্সট থেকে স্লট অবজেক্ট ফেরত দেয়, যার মধ্যে প্যারেন্ট পাস করা স্লটগুলিকে কলযোগ্য ফাংশন হিসেবে অন্তর্ভুক্ত করে যা ভার্চুয়াল DOM নোড ফেরত দেয়। এটি <script setup>-এ ব্যবহার করার উদ্দেশ্যে যেখানে সেটআপ প্রসঙ্গ অবজেক্ট উপলব্ধ নেই৷

TypeScript ব্যবহার করলে, defineSlots() এর পরিবর্তে পছন্দ করা উচিত।

• Type

  ts

  function useSlots(): Record<string, (...args: any[]) => VNode[]>

useModel() ​

এটি অন্তর্নিহিত সাহায্যকারী যা defineModel() কে ক্ষমতা দেয়। <স্ক্রিপ্ট সেটআপ> ব্যবহার করলে, এর পরিবর্তে defineModel() পছন্দ করা উচিত।

• শুধুমাত্র 3.4+ এ উপলব্ধ

• Type

  ts

  function useModel(
    props: Record<string, any>,
    key: string,
    options?: DefineModelOptions
  ): ModelRef
  
  type DefineModelOptions<T = any> = {
    get?: (v: T) => any
    set?: (v: T) => any
  }
  
  type ModelRef<T, M extends PropertyKey = string, G = T, S = T> = Ref<G, S> & [
    ModelRef<T, M, G, S>,
    Record<M, true | undefined>
  ]

• Example

  js

  export default {
    props: ['count'],
    emits: ['update:count'],
    setup(props) {
      const msg = useModel(props, 'count')
      msg.value = 1
    }
  }

• Details

  useModel() নন-SFC কম্পোনেন্টগুলিতে ব্যবহার করা যেতে পারে, যেমন raw setup() ফাংশন ব্যবহার করার সময়। এটি props অবজেক্টকে প্রথম আর্গুমেন্ট হিসেবে এবং মডেলের নামকে দ্বিতীয় আর্গুমেন্ট হিসেবে প্রত্যাশা করে। ঐচ্ছিক তৃতীয় আর্গুমেন্টটি ফলাফলস্বরূপ মডেল রেফারেন্সের জন্য কাস্টম গেটার এবং সেটার ঘোষণা করতে ব্যবহার করা যেতে পারে। মনে রাখবেন যে defineModel() এর বিপরীতে, আপনি নিজেই প্রপস ঘোষণা এবং নির্গমনের জন্য দায়ী।

useTemplateRef() ​

একটি অগভীর রেফ প্রদান করে যার মান টেমপ্লেট উপাদান বা উপাদানের সাথে একটি মিলিত রেফ বৈশিষ্ট্য সহ সিঙ্ক করা হবে।

• Type

  ts

  function useTemplateRef<T>(key: string): Readonly<ShallowRef<T | null>>

• Example

  vue

  <script setup>
  import { useTemplateRef, onMounted } from 'vue'
  
  const inputRef = useTemplateRef('input')
  
  onMounted(() => {
    inputRef.value.focus()
  })
  </script>
  
  <template>
    <input ref="input" />
  </template>

• See also

  • Guide - Template Refs
  • Guide - Typing Template Refs
  • Guide - Typing Component Template Refs

useId() ​

অ্যাক্সেসিবিলিটি অ্যাট্রিবিউট বা ফর্ম কম্পোনেন্টগুলির জন্য অনন্য-প্রতি-অ্যাপ্লিকেশন আইডি তৈরি করতে ব্যবহৃত হয়।

• Type

  ts

  function useId(): string

• Example

  vue

  <script setup>
  import { useId } from 'vue'
  
  const id = useId()
  </script>
  
  <template>
    <form>
      <label :for="id">Name:</label>
      <input :id="id" type="text" />
    </form>
  </template>

• Details

  useId() দ্বারা উত্পন্ন আইডিগুলি অ্যাপ্লিকেশন-প্রতি অনন্য। এটি ফর্ম কম্পোনেন্ট এবং অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলির জন্য আইডি তৈরি করতে ব্যবহার করা যেতে পারে। একই কম্পোনেন্টে একাধিক কল ভিন্ন আইডি তৈরি করবে; একই কম্পোনেন্ট কলিং useId() এর একাধিক দৃষ্টান্তেরও আলাদা আইডি থাকবে।

useId() দ্বারা উত্পন্ন আইডিগুলি সার্ভার এবং ক্লায়েন্ট রেন্ডার জুড়ে স্থিতিশীল হওয়ার গ্যারান্টি দেওয়া হয়, তাই সেগুলি হাইড্রেশনের অমিল না হয়ে SSR অ্যাপ্লিকেশনগুলিতে ব্যবহার করা যেতে পারে।

যদি আপনার একই পৃষ্ঠার একাধিক Vue অ্যাপ্লিকেশন ইনস্ট্যান্স থাকে, তাহলে আপনি app.config.idPrefix এর মাধ্যমে প্রতিটি অ্যাপকে একটি ID প্রিফিক্স দিয়ে ID দ্বন্দ্ব এড়াতে পারেন।