Render Function APIs ​

h() ​

ভার্চুয়াল DOM নোড (vnodes) তৈরি করে।

• প্রকার

  ts

  // full signature
  function h(
    type: string | Component,
    props?: object | null,
    children?: Children | Slot | Slots
  ): VNode
  
  // omitting props
  function h(type: string | Component, children?: Children | Slot): VNode
  
  type Children = string | number | boolean | VNode | null | Children[]
  
  type Slot = () => Children
  
  type Slots = { [name: string]: Slot }

  টাইপগুলি রিডিবিলিটির জন্য সরলীকৃত।

• বিস্তারিত

  প্রথম আরগুমেন্টটি হয় একটি স্ট্রিং (নেটিভ ইলিমেন্টগুলির জন্য) বা একটি Vue কম্পোনেন্ট ডেফিনেইশন হতে পারে। দ্বিতীয় আরগুমেন্টটি হল প্রপস পাস করা, এবং তৃতীয় আর্গুমেন্ট হল চিল্ডেন।

  একটি কম্পোনেন্ট vnode তৈরি করার সময়, চিল্ডেনকে স্লট ফাংশন হিসাবে পাস করা আবশ্যক. একটি সিঙ্গেল স্লট ফাংশন পাস করা যেতে পারে যদি কম্পোনেন্টটি শুধুমাত্র ডিফল্ট স্লট এক্সপেক্ট করে। অন্যথায়, স্লটগুলিকে স্লট ফাংশনগুলির একটি অবজেক্ট হিসাবে পাস করতে হবে।

  সুবিধার জন্য, প্রপস আর্গুমেন্ট বাদ দেওয়া যেতে পারে যখন চিল্ডেন স্লট অবজেক্ট না হয়।

• উদাহরন

  নেটিভ ইলিমেন্টস তৈরি করা:

  js

  import { h } from 'vue'
  
  // all arguments except the type are optional
  h('div')
  h('div', { id: 'foo' })
  
  // both attributes and properties can be used in props
  // Vue automatically picks the right way to assign it
  h('div', { class: 'bar', innerHTML: 'hello' })
  
  // class and style have the same object / array
  // value support like in templates
  h('div', { class: [foo, { bar }], style: { color: 'red' } })
  
  // event listeners should be passed as onXxx
  h('div', { onClick: () => {} })
  
  // children can be a string
  h('div', { id: 'foo' }, 'hello')
  
  // props can be omitted when there are no props
  h('div', 'hello')
  h('div', [h('span', 'hello')])
  
  // children array can contain mixed vnodes and strings
  h('div', ['hello', h('span', 'hello')])

  কম্পোনেন্টস তৈরি করা:

  js

  import Foo from './Foo.vue'
  
  // passing props
  h(Foo, {
    // equivalent of some-prop="hello"
    someProp: 'hello',
    // equivalent of @update="() => {}"
    onUpdate: () => {}
  })
  
  // passing single default slot
  h(Foo, () => 'default slot')
  
  // passing named slots
  // notice the `null` is required to avoid
  // slots object being treated as props
  h(MyComponent, null, {
    default: () => 'default slot',
    foo: () => h('div', 'foo'),
    bar: () => [h('span', 'one'), h('span', 'two')]
  })

• আরো দেখুন Guide - Render Functions - Creating VNodes

mergeProps() ​

নির্দিষ্ট প্রপসের জন্য বিশেষ হ্যান্ডলিং সহ একাধিক প্রপস অবজেক্ট মার্জ করুন।

• প্রকার

  ts

  function mergeProps(...args: object[]): object

• বিস্তারিত

  mergeProps() নিম্নলিখিত প্রপসের জন্য বিশেষ হ্যান্ডলিং সহ একাধিক প্রপস অবজেক্ট মার্জিং সাপোর্ট করে:

  • class
  • style
  • onXxx ইভেন্ট লিসেনার - একই নামের একাধিক লিসেনার একটি অ্যারেতে মার্জ হবে।

  আপনার যদি মার্জ বিহ্যেভিয়ার প্রয়োজন না হয় এবং সিম্পল ওভাররাইট চান, তাহলে এর পরিবর্তে নেটিভ অবজেক্ট স্প্রেড ব্যবহার করা যেতে পারে।

• উদাহরন

  js

  import { mergeProps } from 'vue'
  
  const one = {
    class: 'foo',
    onClick: handlerA
  }
  
  const two = {
    class: { bar: true },
    onClick: handlerB
  }
  
  const merged = mergeProps(one, two)
  /**
   {
     class: 'foo bar',
     onClick: [handlerA, handlerB]
   }
   */

cloneVNode() ​

একটি vnode তৈরি করা।

• প্রকার

  ts

  function cloneVNode(vnode: VNode, extraProps?: object): VNode

• বিস্তারিত

  একটি ক্লোন করা Vnode রিটার্ন দেয়, অপশনালি অরিজিনালটির সাথে মার্জ করার জন্য এক্সট্রা প্রপস সহ।

  একবার তৈরি হয়ে গেলে Vnode-গুলিকে অপরিবর্তনীয় হিসাবে বিবেচনা করা উচিত এবং আপনার বিদ্যমান vnode-এর প্রপসগুলিকে পরিবর্তন করা উচিত নয়। পরিবর্তে, এটি বিভিন্ন / অতিরিক্ত প্রপস দিয়ে ক্লোন করুন।

  vnode-এর বিশেষ ইন্টারন্যাল প্রোপার্টিস রয়েছে, তাই তাদের ক্লোন করা একটি অবজেক্টের স্পেডের মতো সিম্পল নয়। cloneVNode() বেশিরভাগ ইন্টারন্যাল লজিক পরিচালনা করে।

• উদাহরন

  js

  import { h, cloneVNode } from 'vue'
  
  const original = h('div')
  const cloned = cloneVNode(original, { id: 'foo' })

isVNode() ​

একটি ভ্যালু vnode কিনা পরীক্ষা করে.

• প্রকার

  ts

  function isVNode(value: unknown): boolean

resolveComponent() ​

নেইম অনুসারে একটি রেজিস্ট্রাড কম্পোনেন্ট ম্যানুয়ালি সমাধানের জন্য।

• প্রকার

  ts

  function resolveComponent(name: string): Component | string

• বিস্তারিত

  Note: আপনি যদি সরাসরি কম্পোনেন্ট ইম্পোর্ট করতে পারেন তবে আপনার এটির প্রয়োজন নেই।

  resolveComponent() কে অবশ্যই হয় setup() অথবা রেন্ডার ফাংশনের ভিতরে কল করতে হবে, যাতে কারেক্ট কম্পোনেন্টের কন্টেক্স থেকে সমাধান করা যায়।

  যদি কম্পোনেন্টটি পাওয়া না যায়, একটি রানটাইম সতর্কতা নির্গত হবে এবং নেইম স্ট্রিংটি রিটার্ন দেওয়া হবে।

• উদাহরন

  js

  import { h, resolveComponent } from 'vue'
  
  export default {
    setup() {
      const ButtonCounter = resolveComponent('ButtonCounter')
  
      return () => {
        return h(ButtonCounter)
      }
    }
  }

  js

  import { h, resolveComponent } from 'vue'
  
  export default {
    render() {
      const ButtonCounter = resolveComponent('ButtonCounter')
      return h(ButtonCounter)
    }
  }

• আরো দেখুন Guide - Render Functions - Components

resolveDirective() ​

নেইম দ্বারা একটি রেজিস্ট্রাড ডিরেক্টিভ ম্যানুয়ালি সমাধানের জন্য।

• প্রকার

  ts

  function resolveDirective(name: string): Directive | undefined

• বিস্তারিত

  Note: আপনি যদি সরাসরি কম্পোনেন্ট ইম্পোর্ট করতে পারেন তবে আপনার এটির প্রয়োজন নেই।

  কারেক্ট কম্পোনেন্ট কনটেক্স থেকে সমাধান করার জন্য resolveDirective() কে অবশ্যই হয় setup() অথবা রেন্ডার ফাংশনের ভিতরে কল করতে হবে।

  যদি ডিরেক্টিভটি না পাওয়া যায়, একটি রানটাইম সতর্কতা নির্গত হবে, এবং ফাংশনটি undefined প্রদান করে।

• আরো দেখুন Guide - Render Functions - Custom Directives

withDirectives() ​

vnodes-এ কাস্টম ডিরেক্টিভ অ্যাড করার জন্য.

• প্রকার

  ts

  function withDirectives(
    vnode: VNode,
    directives: DirectiveArguments
  ): VNode
  
  // [Directive, value, argument, modifiers]
  type DirectiveArguments = Array<
    | [Directive]
    | [Directive, any]
    | [Directive, any, string]
    | [Directive, any, string, DirectiveModifiers]
  >

• বিস্তারিত

  কাস্টম ডিরেক্টিভসহ একটি বিদ্যমান vnode মোড়ানো। দ্বিতীয় আরগুমেন্টটি কাস্টম ডিরেক্টিভগুলোর একটি অ্যারে। প্রতিটি কাস্টম ডিরেক্টিভ [Directive, value, argument, modifiers] আকারে একটি অ্যারে হিসাবেও উপস্থাপন করা হয়। প্রয়োজন না হলে অ্যারের টেইলিং ইলিমেন্টগুলি বাদ দেওয়া যেতে পারে।

• উদাহরন

  js

  import { h, withDirectives } from 'vue'
  
  // a custom directive
  const pin = {
    mounted() {
      /* ... */
    },
    updated() {
      /* ... */
    }
  }
  
  // <div v-pin:top.animate="200"></div>
  const vnode = withDirectives(h('div'), [
    [pin, 200, 'top', { animate: true }]
  ])

• আরো দেখুন Guide - Render Functions - Custom Directives

withModifiers() ​

একটি ইভেন্ট হ্যান্ডলার ফাংশনে বিল্ট-ইন v-on modifiers যোগ করার জন্য।

• প্রকার

  ts

  function withModifiers(fn: Function, modifiers: ModifierGuardsKeys[]): Function

• উদাহরন

  js

  import { h, withModifiers } from 'vue'
  
  const vnode = h('button', {
    // equivalent of v-on:click.stop.prevent
    onClick: withModifiers(() => {
      // ...
    }, ['stop', 'prevent'])
  })

• আরো দেখুন Guide - Render Functions - Event Modifiers