Custom Directives ​

Introduction ​

কোরে পাঠানো নির্দেশাবলীর ডিফল্ট সেট ছাড়াও (যেমন v-model বা v-show), Vue আপনাকে আপনার নিজস্ব কাস্টম নির্দেশাবলী নিবন্ধন করার অনুমতি দেয়।

আমরা Vue-তে কোড পুনঃব্যবহারের দুটি ফর্ম চালু করেছি: components এবং composables। কম্পোনেন্টগুলি হল প্রধান বিল্ডিং ব্লক, যখন কম্পোজেবলগুলি রাষ্ট্রীয় যুক্তি পুনঃব্যবহারের উপর দৃষ্টি নিবদ্ধ করে। অন্যদিকে, কাস্টম নির্দেশাবলী প্রধানত যুক্তি পুনঃব্যবহারের উদ্দেশ্যে তৈরি করা হয় যা প্লেইন কম্পোনেন্টগুলিতে নিম্ন-স্তরের DOM অ্যাক্সেস জড়িত।

একটি কাস্টম নির্দেশিকাকে একটি অবজেক্ট হিসাবে সংজ্ঞায়িত করা হয় যাতে একটি কম্পোনেন্টের অনুরূপ লাইফসাইকেল হুক থাকে। হুকগুলি সেই কম্পোনেন্টটি গ্রহণ করে যা নির্দেশে আবদ্ধ। এখানে একটি নির্দেশের একটি উদাহরণ যা একটি ইনপুট ফোকাস করে যখন কম্পোনেন্টটি Vue দ্বারা DOM-এ ঢোকানো হয়:

<script setup>
// enables v-focus in templates
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

const focus = {
  mounted: (el) => el.focus()
}

export default {
  directives: {
    // enables v-focus in template
    focus
  }
}

<input v-focus />

ধরে নিচ্ছি আপনি পৃষ্ঠার অন্য কোথাও ক্লিক করেননি, উপরের ইনপুটটি স্বয়ংক্রিয়ভাবে ফোকাস করা উচিত। এই নির্দেশিকাটি autofocus অ্যাট্রিবিউটের চেয়ে বেশি কার্যকর কারণ এটি শুধুমাত্র পৃষ্ঠা লোডের ক্ষেত্রে কাজ করে না - এটি Vue দ্বারা কম্পোনেন্টটিকে গতিশীলভাবে সন্নিবেশ করা হলে এটিও কাজ করে।

export default {
  setup() {
    /*...*/
  },
  directives: {
    // enables v-focus in template
    focus: {
      /* ... */
    }
  }
}

অ্যাপ স্তরে বিশ্বব্যাপী কাস্টম নির্দেশাবলী নিবন্ধন করাও সাধারণ:

const app = createApp({})

// make v-focus usable in all components
app.directive('focus', {
  /* ... */
})

Directive Hooks ​

একটি নির্দেশমূলক সংজ্ঞা অবজেক্ট বিভিন্ন হুক ফাংশন প্রদান করতে পারে (সমস্ত ঐচ্ছিক):

const myDirective = {
  // called before bound element's attributes
  // or event listeners are applied
  created(el, binding, vnode, prevVnode) {
    // see below for details on arguments
  },
  // called right before the element is inserted into the DOM.
  beforeMount(el, binding, vnode, prevVnode) {},
  // called when the bound element's parent component
  // and all its children are mounted.
  mounted(el, binding, vnode, prevVnode) {},
  // called before the parent component is updated
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // called after the parent component and
  // all of its children have updated
  updated(el, binding, vnode, prevVnode) {},
  // called before the parent component is unmounted
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // called when the parent component is unmounted
  unmounted(el, binding, vnode, prevVnode) {}
}

Hook Arguments ​

নির্দেশিক হুক এই আর্গুমেন্ট পাস করা হয়:

• el: নির্দেশিকাটি যে কম্পোনেন্টটির সাথে আবদ্ধ। এটি সরাসরি DOM ম্যানিপুলেট করতে ব্যবহার করা যেতে পারে।

• binding: নিম্নলিখিত বৈশিষ্ট্য ধারণকারী একটি অবজেক্ট।

  • value: নির্দেশিকায় পাঠানো মান। যেমন v-my-directive="1 + 1"-এ, মান হবে 2।
  • oldValue: পূর্ববর্তী মান, শুধুমাত্র beforeUpdate এবং updated-এ উপলব্ধ। মান পরিবর্তিত হয়েছে কিনা তা উপলব্ধ।
  • arg: আর্গুমেন্ট নির্দেশে চলে গেছে, যদি থাকে। যেমন v-my-directive:foo-এ, arg হবে "foo"।
  • modifiers: কোনো অবজেক্ট যাতে মডিফায়ার থাকে, যদি থাকে। যেমন v-my-directive.foo.bar-এ, মডিফায়ার অবজেক্ট হবে { foo: true, bar: true }।
  • instance: কম্পোনেন্টের উদাহরণ যেখানে নির্দেশিকা ব্যবহার করা হয়।
  • dir: নির্দেশক সংজ্ঞা অবজেক্ট।

• vnode: আন্ডারল্যায়েরিং VNode আবদ্ধ কম্পোনেন্টস প্রতিনিধিত্ব করে।

• prevVnode: VNode পূর্ববর্তী রেন্ডার থেকে আবদ্ধ কম্পোনেন্টস প্রতিনিধিত্ব করে। শুধুমাত্র beforeUpdate এবং updated হুকগুলিতে উপলব্ধ।

একটি উদাহরণ হিসাবে, নিম্নলিখিত নির্দেশিক ব্যবহার বিবেচনা করুন:

<div v-example:foo.bar="baz">

binding আর্গুমেন্ট এর আকারে একটি অবজেক্ট হবে:

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* value of `baz` */,
  oldValue: /* value of `baz` from previous update */
}

অন্তর্নির্মিত নির্দেশের অনুরূপ, কাস্টম নির্দেশিক আর্গুমেন্টগুলি গতিশীল হতে পারে। উদাহরণ স্বরূপ:

<div v-example:[arg]="value"></div>

এখানে নির্দেশমূলক আর্গুমেন্ট আমাদের কম্পোনেন্ট স্টেটে arg কম্পিউটেড প্রপার্টির উপর ভিত্তি করে প্রতিক্রিয়াশীলভাবে আপডেট করা হবে।

Function Shorthand ​

একটি কাস্টম নির্দেশের জন্য mounted এবং updated-এর জন্য একই আচরণ করা সাধারণ, অন্য হুকের প্রয়োজন নেই। এই ধরনের ক্ষেত্রে আমরা নির্দেশকে একটি ফাংশন হিসাবে সংজ্ঞায়িত করতে পারি:

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // this will be called for both `mounted` and `updated`
  el.style.color = binding.value
})

Object Literals ​

আপনার নির্দেশের একাধিক মান প্রয়োজন হলে, আপনি জাভাস্ক্রিপ্ট অবজেক্ট আক্ষরিকভাবেও পাস করতে পারেন। মনে রাখবেন, নির্দেশাবলী যেকোনো বৈধ জাভাস্ক্রিপ্ট এক্সপ্রেশন নিতে পারে।

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})

Usage on Components ​

কম্পোনেন্টগুলিতে ব্যবহৃত হলে, কাস্টম নির্দেশাবলী সর্বদা একটি কম্পোনেন্টের রুট নোডে প্রযোজ্য হবে, অনুরূপFallthrough Attributes.

<MyComponent v-demo="test" />

<!-- template of MyComponent -->

<div> <!-- v-demo directive will be applied here -->
  <span>My component content</span>
</div>

মনে রাখবেন যে কম্পোনেন্টগুলির সম্ভাব্য একাধিক রুট নোড থাকতে পারে। মাল্টি-রুট কম্পোনেন্টে প্রয়োগ করা হলে, একটি নির্দেশ উপেক্ষা করা হবে এবং একটি সতর্কতা নিক্ষেপ করা হবে। অ্যাট্রিবিউটের বিপরীতে, নির্দেশাবলী v-bind="$attrs" সহ একটি ভিন্ন কম্পোনেন্টে পাঠানো যাবে না। সাধারণভাবে, কম্পোনেন্টগুলিতে কাস্টম নির্দেশাবলী ব্যবহার করার জন্য not সুপারিশ করা হয়।