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() can be used in non-SFC components, e.g. when using raw setup() function. It expects the props object as the first argument, and the model name as the second argument. The optional third argument can be used to declare custom getter and setter for the resulting model ref. Note that unlike defineModel(), you are responsible for declaring the props and emits yourself.

useTemplateRef() ​

Returns a shallow ref whose value will be synced with the template element or component with a matching ref attribute.

• 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 এর মাধ্যমে প্রতিটি অ্যাপকে একটি আইডি প্রিফিক্স দিয়ে আইডি দ্বন্দ্ব এড়াতে পারেন।