Vue $emit() Method
Vue-এর বিল্ট-ইন $emit() পদ্ধতির সাহায্যে, আপনি চাইল্ড এলিমেন্টে একটি কাস্টম ইভেন্ট তৈরি করতে পারেন যা মূল উপাদানে ধরা পড়বে।
প্রপস ব্যবহার করা হয় প্যারেন্ট এলিমেন্ট থেকে চাইল্ড এলিমেন্টে ডেটা পাঠানোর জন্য, এবং $emit() ব্যবহার করা হয় এর বিপরীতে: চাইল্ড এলিমেন্ট থেকে পিতামাতার কাছে তথ্য পাঠাতে।
$emit() এর উদ্দেশ্য
আমরা এর পরে যা করতে যাচ্ছি তা হল App.vue প্যারেন্টে একটি খাদ্য আইটেমের 'প্রিয়' অবস্থা পরিবর্তন করা, FoodItem.vue চাইল্ড এলিমেন্ট নয়, যেখানে পরিবর্তনটি বর্তমানে ঘটছে।
FoodItem.vue-এর পরিবর্তে পছন্দের রাজ্যটিকে App.vue-তে পরিবর্তন করার কারণ হল App.vue যেখানে প্রিয় রাজ্যটি প্রথমে সংরক্ষণ করা হয়, তাই এটি আপডেট করা দরকার। একটি বড় প্রকল্পে, ডেটা একটি ডাটাবেস থেকে আসতে পারে, যার সাথে আমাদের App.vue-এ সংযোগ রয়েছে এবং আমরা ডাটাবেসে পরিবর্তন করার জন্য উপাদান থেকে একটি পরিবর্তন চাই, তাই শিশু উপাদানটি অভিভাবককে অবহিত করা উচিত।
একটি কাস্টম ইভেন্ট প্রকাশ করুন
কম্পোনেন্ট থেকে পিতামাতার কাছে তথ্য পাঠানোর প্রয়োজন আছে এবং আমরা তা করতে বিল্ট-ইন $emit() পদ্ধতি ব্যবহার করি।
FoodItem.vue toggleFavorite . , 'toggle-favorite' :
// FoodItem.vue:
methods: {
toggleFavorite() {
this.foodIsFavorite = !this.foodIsFavorite;
this.$emit('toggle-favorite');
}
}দ্রষ্টব্য:
আমরা আমাদের কাস্টম উদাহরণের জন্য একটি নাম চয়ন করতে পারি, তবে আউটপুট উদাহরণের জন্য কেবাপ-কেস ব্যবহার করা স্বাভাবিক।
রিলিজ ইভেন্ট গ্রহণ
কাস্টম আউটপুট ইভেন্ট 'টগল-প্রিয়' এখন FoodItem.vue কম্পোনেন্ট থেকে নির্গত হয়েছে, কিন্তু App.vue-কে অবশ্যই প্যারেন্টের ইভেন্টের জন্য শুনতে হবে এবং ঘটনাটি ঘটেছে কিনা তা দেখতে একটি পদ্ধতিতে কল করতে হবে।
v-on এর পরিবর্তে: আমরা @ শর্টহ্যান্ড দিয়ে ইভেন্টটি শুনি, যেখানে App.vue-তে উপাদানটি তৈরি করা হয়েছে:
উদাহরণ
আপনার নিজস্ব Vue সার্ভার পান
// App.vue:
<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
@toggle-favorite="receiveEmit"
/>যখন আমাদের কাস্টম 'টগল-প্রিয়' ইভেন্ট ফায়ার হয়, ইভেন্টটি ফায়ার হয়েছে কিনা তা দেখার জন্য আমাদের App.vue-তে একটি প্রাপ্তি-এমিট পদ্ধতি তৈরি করতে হবে:
methods: {
receiveEmit() {
alert('Hello World!');
}
}পিতামাতার মধ্যে একটি খাদ্য আইটেমের 'প্রিয়' অবস্থা পরিবর্তন করা
আমাদের এখন একটি ইভেন্ট রয়েছে যা App.vue-কে অবহিত করে যখন চাইল্ড কম্পোনেন্ট থেকে 'লাইক' বোতামটি ক্লিক করা হয়।
যখন একটি 'প্রিয়' বোতামে ক্লিক করা হয়, আমরা App.vue-তে 'খাবার' অ্যারেতে সঠিক খাদ্য আইটেমের 'প্রিয়' বৈশিষ্ট্যটি পরিবর্তন করতে চাই। এটি করার জন্য, আমরা FoodItem.vue থেকে App.vue-তে খাদ্য আইটেমের নাম পাস করি কারণ এটি প্রতিটি খাবারের জন্য অনন্য:
// FoodItem.vue:
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', this.foodName);
}
}App.vue-তে আমরা 'টগল-প্রিয়' ইভেন্টটি ঘটলে বলা পদ্ধতির যুক্তি হিসাবে খাদ্য বস্তুর নাম পেতে পারি:
উদাহরণ
// App.vue:
methods: {
receiveEmit(foodId) {
alert( 'You clicked: ' + foodId );
}
}এখন আমরা জানি কোন খাবার আইটেমটিতে ক্লিক করা হয়েছে, তাই আমরা 'খাবার' সারিতে সঠিক খাদ্য আইটেমের জন্য 'প্রিয়' অবস্থা আপডেট করতে পারি:
// App.vue:
methods: {
receiveEmit(foodId) {
const foundFood = this.foods.find(
food => food.name === foodId
);
foundFood.favorite = !foundFood.favorite;
}
}বর্ণনা:
উপরের কোডে, 'ফাইন্ড' অ্যারে পদ্ধতিটি 'খাবার' অ্যারের মাধ্যমে লুপ করে, এমন একটি আইটেমের সন্ধান করে যার নামের বৈশিষ্ট্যটি আমরা যে খাদ্য আইটেমে ক্লিক করেছি তার সমান, এবং সেই আইটেমটিকে 'foundFood' হিসাবে ফিরিয়ে দেয়। তারপর 'foundFood.favorite' আগে যা ছিল তার বিপরীতে সেট করা যেতে পারে, যাতে এটি সত্য এবং মিথ্যার মধ্যে টগল করে।
ইমেজ আপডেট
'খাবার' অ্যারে থেকে 'প্রিয়' স্ট্যাটাস সহ একটি খাদ্য উপাদান ইতিমধ্যেই তৈরি করা হয়েছে এবং App.vue থেকে 'is-favorite' হিসাবে প্রপ হিসাবে পাস করা হয়েছে, তাই ছবিটি আপডেট করতেআমাদের এই 'isFavorite' প্রপটি উল্লেখ করতে হবে FoodItem.vue-তে v-show থেকে যেখানে উপাদানটি রয়েছে:
<img src="/img_quality.svg" v-show="isFavorite">FoodItem.vue 'foodIsFavorite' , .
দ্রষ্টব্য:
এই চূড়ান্ত উদাহরণ কোডে, আমরা আগের মতো খাবারের আইটেমগুলির পছন্দের স্ট্যাটাস পরিবর্তন করতে পারি, কিন্তু এখন পছন্দের স্ট্যাটাসটি App.vue-এর ভিতরে সঠিক জায়গায় পরিবর্তন করা হয়েছে।
'এমিট' বিকল্প
FoodItem.vue , Vue 'emits' .
প্রপগুলি অবশ্যই উপাদানে ঘোষণা করা উচিত, যখন আউটপুটগুলি নথিভুক্ত করার সুপারিশ করা হয়।
FoodItem.vue :
<script>
export default {
props: ['foodName','foodDesc','isFavorite'],
emits: ['toggle-favorite'],
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', this.foodName);
}
}
};
</script>সুবিধা:
যখন রিলিজগুলি নথিভুক্ত করা হয়, তখন উপাদানটি অন্যদের জন্য ব্যবহার করা সহজ হয়ে যায়।
ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন