Fallthrough Attributes ​

এই পৃষ্ঠাটি ধরে নেওয়া হচ্ছে আপনি ইতিমধ্যেই Components Basics পড়েছেন। আপনি যদি কম্পোনেন্টগুলিতে নতুন হন তবে প্রথমে এটি পড়ুন।

Attribute Inheritance ​

একটি "ফলথ্রু অ্যাট্রিবিউট" হল একটি অ্যাট্রিবিউট বা v-on ইভেন্ট লিসেনার যা একটি কম্পোনেন্টে পাস করা হয়, কিন্তু গ্রহনকারী কম্পোনেন্টের props বা emits এ স্পষ্টভাবে ঘোষণা করা হয় না - নির্গত-ঘটনা)। এর সাধারণ উদাহরণগুলির মধ্যে রয়েছে class, style এবং id বৈশিষ্ট্য।

যখন একটি কম্পোনেন্ট একটি একক রুট কম্পোনেন্ট রেন্ডার করে, তখন ফলথ্রু বৈশিষ্ট্যগুলি স্বয়ংক্রিয়ভাবে রুট কম্পোনেন্টের বৈশিষ্ট্যগুলিতে যোগ করা হবে। উদাহরণস্বরূপ, নিম্নলিখিত টেমপ্লেট সহ একটি <MyButton> কম্পোনেন্ট দেওয়া হয়েছে:

<!-- template of <MyButton> -->
<button>Click Me</button>

এবং একজন অভিভাবক এই কম্পোনেন্টটির সাথে ব্যবহার করছেন:

<MyButton class="large" />

চূড়ান্ত রেন্ডার করা DOM হবে:

<button class="large">Click Me</button>

এখানে, <MyButton> একটি গৃহীত প্রপ হিসাবে class ঘোষণা করেনি। তাই, class কে একটি ফলথ্রু অ্যাট্রিবিউট হিসেবে বিবেচনা করা হয় এবং স্বয়ংক্রিয়ভাবে <MyButton> এর মূল কম্পোনেন্টে যোগ করা হয়।

class and style Merging ​

যদি চাইল্ড কম্পোনেন্টের রুট এলিমেন্টে ইতিমধ্যেই বিদ্যমান class বা style অ্যাট্রিবিউট থাকে, তাহলে এটি অভিভাবকদের কাছ থেকে উত্তরাধিকারসূত্রে পাওয়া class এবং style মানগুলির সাথে মার্জ করা হবে। ধরুন আমরা আগের উদাহরণে <MyButton> এর টেমপ্লেট পরিবর্তন করেছি:

<!-- template of <MyButton> -->
<button class="btn">Click Me</button>

তারপর চূড়ান্ত রেন্ডার করা DOM এখন হয়ে যাবে:

<button class="btn large">Click Me</button>

v-on Listener Inheritance ​

একই নিয়ম v-on ইভেন্ট শ্রোতাদের ক্ষেত্রে প্রযোজ্য:

<MyButton @click="onClick" />

click শ্রোতাকে <MyButton> এর মূল কম্পোনেন্টে যোগ করা হবে, অর্থাৎ নেটিভ <button> কম্পোনেন্ট। যখন নেটিভ <button> ক্লিক করা হয়, তখন এটি মূল কম্পোনেন্টের onClick পদ্ধতিকে ট্রিগার করবে। যদি নেটিভ <button> এর ইতিমধ্যেই v-on এর সাথে আবদ্ধ কোনো click শ্রোতা থাকে, তাহলে উভয় শ্রোতাই ট্রিগার করবে।

Nested Component Inheritance ​

যদি একটি কম্পোনেন্ট অন্য একটি কম্পোনেন্টকে তার রুট নোড হিসাবে রেন্ডার করে, উদাহরণস্বরূপ, আমরা একটি <BaseButton> এর রুট হিসাবে রেন্ডার করতে <MyButton> রিফ্যাক্টর করেছি:

<!-- template of <MyButton/> that simply renders another component -->
<BaseButton />

তারপর <MyButton> দ্বারা প্রাপ্ত ফলথ্রু বৈশিষ্ট্যগুলি স্বয়ংক্রিয়ভাবে <BaseButton>-এ ফরোয়ার্ড করা হবে।

মনে রাখবেন যে:

1. ফরোয়ার্ড করা অ্যাট্রিবিউটের মধ্যে এমন কোনো অ্যাট্রিবিউট অন্তর্ভুক্ত নয় যা প্রপস হিসেবে ঘোষণা করা হয়েছে বা <MyButton> দ্বারা ঘোষিত ইভেন্টের v-on শ্রোতারা - অন্য কথায়, ঘোষিত props এবং শ্রোতাদের <MyButton' দ্বারা "গ্রাহ্য" করা হয়েছে। >

2. ফরোয়ার্ড করা বৈশিষ্ট্যগুলি <BaseButton> দ্বারা প্রপস হিসাবে গৃহীত হতে পারে, যদি এটি দ্বারা ঘোষণা করা হয়।

Disabling Attribute Inheritance ​

আপনি যদি না চান যে কোনো কম্পোনেন্ট স্বয়ংক্রিয়ভাবে অ্যাট্রিবিউটের উত্তরাধিকারী হোক, আপনি কম্পোনেন্টের বিকল্পগুলিতে inheritAttrs: false সেট করতে পারেন।

<script setup>
defineOptions({
  inheritAttrs: false
})
// ...setup logic
</script>

বৈশিষ্ট্যের উত্তরাধিকার নিষ্ক্রিয় করার সাধারণ দৃশ্য হল যখন বৈশিষ্ট্যগুলিকে রুট নোড ছাড়াও অন্যান্য কম্পোনেন্টগুলিতে প্রয়োগ করা প্রয়োজন। inheritAttrs বিকল্পটিকে false তে সেট করে, আপনি ফলথ্রু বৈশিষ্ট্যগুলি কোথায় প্রয়োগ করতে হবে তার উপর সম্পূর্ণ নিয়ন্ত্রণ নিতে পারেন।

এই ফলথ্রু অ্যাট্রিবিউটগুলি সরাসরি টেমপ্লেট এক্সপ্রেশনে $attrs হিসাবে অ্যাক্সেস করা যেতে পারে:

<span>Fallthrough attributes: {{ $attrs }}</span>

$attrs অবজেক্টে এমন সব বৈশিষ্ট্য রয়েছে যা কম্পোনেন্টের props বা emits বিকল্প দ্বারা ঘোষণা করা হয় না (যেমন, class, style, v-on listeners, ইত্যাদি)।

কিছু নোট:

• props বিপরীতে, ফলথ্রু অ্যাট্রিবিউটগুলি জাভাস্ক্রিপ্টে তাদের আসল কেসিং সংরক্ষণ করে, তাই foo-bar-এর মতো একটি অ্যাট্রিবিউটকে $attrs['foo-bar'] হিসেবে অ্যাক্সেস করতে হবে।

• একটি v-on ইভেন্ট লিসেনার যেমন @click অবজেক্টে $attrs.onClick এর অধীনে একটি ফাংশন হিসেবে উন্মুক্ত হবে।

previous section থেকে আমাদের <MyButton> কম্পোনেন্ট উদাহরণ ব্যবহার করে - কখনও কখনও আমাদের স্টাইলিং উদ্দেশ্যে একটি অতিরিক্ত <div> দিয়ে প্রকৃত <button> কম্পোনেন্ট মোড়ানো প্রয়োজন হতে পারে:

<div class="btn-wrapper">
  <button class="btn">Click Me</button>
</div>

আমরা চাই যে সমস্ত ফলশ্রুতি বৈশিষ্ট্য যেমন class এবং v-on শ্রোতাদের ভিতরের <button>-এ প্রয়োগ করা হোক, বাইরের <div> নয়। আমরা inheritAttrs: false এবং v-bind="$attrs" দিয়ে এটি অর্জন করতে পারি:

<div class="btn-wrapper">
  <button class="btn" v-bind="$attrs">Click Me</button>
</div>

মনে রাখবেন v-bind কোনো যুক্তি ছাড়া কোনো অবজেক্টর সমস্ত বৈশিষ্ট্যকে লক্ষ্য কম্পোনেন্টের বৈশিষ্ট্য হিসেবে আবদ্ধ করে।

Attribute Inheritance on Multiple Root Nodes ​

একটি একক রুট নোড সহ কম্পোনেন্টগুলির বিপরীতে, একাধিক রুট নোড সহ কম্পোনেন্টগুলির একটি স্বয়ংক্রিয় বৈশিষ্ট্য ফলথ্রু আচরণ নেই। যদি $attrs স্পষ্টভাবে আবদ্ধ না হয়, তাহলে একটি রানটাইম সতর্কতা জারি করা হবে।

<CustomLayout id="custom-layout" @click="changeValue" />

যদি <CustomLayout>-এর নিম্নলিখিত মাল্টি-রুট টেমপ্লেট থাকে, তাহলে একটি সতর্কতা থাকবে কারণ Vue নিশ্চিত হতে পারে না যে কোথায় ফলথ্রু অ্যাট্রিবিউট প্রয়োগ করতে হবে:

<header>...</header>
<main>...</main>
<footer>...</footer>

যদি $attrs স্পষ্টভাবে আবদ্ধ থাকে তাহলে সতর্কতা দমন করা হবে:

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>

Accessing Fallthrough Attributes in JavaScript ​

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

const attrs = useAttrs()
</script>

export default {
  setup(props, ctx) {
    // fallthrough attributes are exposed as ctx.attrs
    console.log(ctx.attrs)
  }
}

export default {
  created() {
    console.log(this.$attrs)
  }
}