Vue-এ একমুখী ডেটা প্রবাহ
সমস্ত প্রপস একটি একমুখী বাইন্ডিং গঠন করে চাইল্ড প্রপার্টি এবং প্যারেন্ট প্রপার্টির মধ্যে: যখন প্যারেন্ট প্রপার্টি আপডেট হয় - এটি চাইল্ড কম্পোনেন্টে প্রেরণ করা হবে, কিন্তু বিপরীতভাবে নয়। এটি চাইল্ড কম্পোনেন্ট দ্বারা প্যারেন্টের স্টেট Accidentally পরিবর্তন হওয়া রোধ করে, যা আপনার অ্যাপ্লিকেশনের ডেটা প্রবাহ বোঝা কঠিন করে তুলতে পারে।
উপরন্তু, প্রতিবার প্যারেন্ট কম্পোনেন্ট আপডেট হলে, চাইল্ড কম্পোনেন্টের সমস্ত প্রপস সর্বশেষ মান দিয়ে আপডেট করা হবে। এর মানে হল যে আপনার চাইল্ড কম্পোনেন্টের ভিতরে একটি প্রপ পরিবর্তন করার চেষ্টা করা উচিত নয়। আপনি যদি তা করেন, Vue কনসোলে একটি সতর্কতা দেখাবে।
সাধারণত দুটি ক্ষেত্রে দেখা যায় যখন একটি প্রপ পরিবর্তন করার প্রলোভন arises। আসুন সেগুলি বিবেচনা করি।
প্রথম ক্ষেত্রে
প্রপটি প্রাথমিক মান প্রেরণের জন্য ব্যবহার করা হয়; চাইল্ড কম্পোনেন্ট এটি পরবর্তীতে লোকাল ডেটা প্রপার্টি হিসাবে ব্যবহার করতে চায়। এই ক্ষেত্রে সর্বোত্তম হল ডেটাতে একটি লোকাল প্রপার্টি সংজ্ঞায়িত করা যা প্রপের মানকে প্রারম্ভিক মান হিসাবে ব্যবহার করে:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
দ্বিতীয় ক্ষেত্রে
প্রপটি একটি raw মান হিসাবে পাস করা হয় যা রূপান্তর করা প্রয়োজন। এই ক্ষেত্রে সর্বোত্তম হল প্রপটি ব্যবহার করে একটি computed প্রপার্টি সংজ্ঞায়িত করা:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
মন্তব্য
দয়া করে note করুন যে JavaScript-এ অবজেক্ট এবং অ্যারে রেফারেন্স দ্বারা পাস করা হয়, তাই যদি প্রপটি একটি অ্যারে বা অবজেক্ট হয়, তাহলে চাইল্ড কম্পোনেন্টের ভিতরে সেই অবজেক্ট বা অ্যারে পরিবর্তন করলে প্যারেন্টের স্টেটকে প্রভাবিত করবে এবং Vue এটি সম্পর্কে সতর্ক করতে অক্ষম। প্রপগুলির যেকোনো mutation এড়ানো উচিত, অবজেক্ট এবং অ্যারে সহ, কারণ ডেটা বাইন্ডিং-এর একমুখী প্রকৃতি উপেক্ষা করা অনাকাঙ্ক্ষিত ফলাফলের দিকে নিয়ে যেতে পারে।
