Riot.js এ Parent-Child Components এর মধ্যে ইভেন্ট আদান-প্রদান খুবই সহজ এবং সরল, কারণ Riot.js ডাটা বাইন্ডিং এবং ইভেন্ট ম্যানেজমেন্টে একটি পরিষ্কার এবং সহজ পদ্ধতি প্রদান করে। Parent এবং Child কম্পোনেন্টের মধ্যে ডাটা এবং ইভেন্ট আদান-প্রদান করার জন্য আপনাকে কিছু নির্দিষ্ট নিয়ম অনুসরণ করতে হবে।
Parent-Child Components এর মধ্যে ইভেন্ট আদান-প্রদান
ধরা যাক, আমরা একটি Parent কম্পোনেন্ট এবং একটি Child কম্পোনেন্ট তৈরি করতে যাচ্ছি। Child কম্পোনেন্টটি Parent কম্পোনেন্টে কিছু ইভেন্ট পাঠাবে এবং Parent কম্পোনেন্টটি সেই ইভেন্টটি গ্রহণ করবে।
১. Parent থেকে Child এ ডাটা পাঠানো (প্রপস ব্যবহার করে)
Parent কম্পোনেন্ট Child কম্পোনেন্টে ডাটা প্রপস হিসেবে পাঠাতে পারে। এই প্রপসগুলি সাধারণত কম্পোনেন্টের রেন্ডারিং সময় ব্যবহার করা হয়।
Example: Parent কম্পোনেন্টে ডাটা পাঠানো Child কম্পোনেন্টে
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component title="Parent's Title" on-click={handleChildClick}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick(e) {
console.log('Child clicked', e);
}
}
</script>
</parent-component>
এখানে:
<child-component title="Parent's Title" />: Parent কম্পোনেন্টtitleনামের প্রপস Child কম্পোনেন্টে পাঠাচ্ছে।on-click={handleChildClick}: Parent কম্পোনেন্ট Child কম্পোনেন্টেরclickইভেন্টে হ্যান্ডলার সেট করছে।
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<h1>{opts.title}</h1>
<button onclick={handleClick}>Click Me</button>
<script>
export default {
handleClick() {
this.emit('click', 'Button was clicked!');
}
}
</script>
</child-component>
এখানে:
opts.titleদিয়ে Parent থেকে প্রাপ্ত ডাটা ব্যবহার করা হচ্ছে।this.emit('click', 'Button was clicked!'): Child কম্পোনেন্ট একটিclickইভেন্ট ইস্যু করছে, যা Parent কম্পোনেন্ট দ্বারা হ্যান্ডল করা হবে।
২. Child থেকে Parent এ ইভেন্ট পাঠানো (Emit ব্যবহার করে)
Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ইভেন্ট পাঠানোর জন্য this.emit() ব্যবহার করা হয়। এই ইভেন্টটি Parent কম্পোনেন্টে শোনার জন্য on- প্রিফিক্স দিয়ে হ্যান্ডলার সেট করা হয়।
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component on-click={handleChildClick}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick(message) {
console.log('Message from child: ', message);
}
}
</script>
</parent-component>
এখানে, on-click={handleChildClick} Parent কম্পোনেন্টে একটি হ্যান্ডলার নির্ধারণ করছে, যা Child কম্পোনেন্টের click ইভেন্ট গ্রহণ করবে।
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<button onclick={handleClick}>Click Me</button>
<script>
export default {
handleClick() {
this.emit('click', 'Hello from Child!');
}
}
</script>
</child-component>
এখানে, this.emit('click', 'Hello from Child!') দিয়ে Child কম্পোনেন্ট একটি click ইভেন্ট ইস্যু করছে। Parent কম্পোনেন্টে সেট করা on-click হ্যান্ডলারটি এই ইভেন্ট গ্রহণ করবে এবং একটি মেসেজ কনসোলে লগ করবে।
৩. Multiple Events (একাধিক ইভেন্ট)
Child কম্পোনেন্ট একাধিক ইভেন্ট ইস্যু করতে পারে এবং Parent কম্পোনেন্টে তাদের সঠিকভাবে হ্যান্ডল করতে পারে। এটি সাধারণত ব্যবহার করা হয় যখন একাধিক কার্যকলাপ বা ইভেন্ট নিয়ন্ত্রণ করতে হয়।
Example: Multiple Events
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component on-click={handleChildClick} on-submit={handleChildSubmit}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick(message) {
console.log('Click Event from Child:', message);
},
handleChildSubmit(data) {
console.log('Submit Event from Child:', data);
}
}
</script>
</parent-component>
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<button onclick={handleClick}>Click Me</button>
<form onsubmit={handleSubmit}>
<input type="text" ref={input}/>
<button type="submit">Submit</button>
</form>
<script>
export default {
handleClick() {
this.emit('click', 'Button clicked!');
},
handleSubmit(e) {
e.preventDefault();
const data = this.refs.input.value;
this.emit('submit', data);
}
}
</script>
</child-component>
এখানে:
handleClickবাটন ক্লিক করলেclickইভেন্ট ইস্যু করবে।handleSubmitফর্ম সাবমিট হলেsubmitইভেন্ট ইস্যু করবে, যা Parent কম্পোনেন্টে আলাদা করে হ্যান্ডল করা হচ্ছে।
৪. Parent থেকে Child এ ইভেন্ট পাঠানো (Custom Methods)
Riot.js-এ Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে কাস্টম মেথড বা ফাংশনও পাঠানো যায়, যাতে Child কম্পোনেন্ট নিজে থেকে সেই মেথড ব্যবহার করতে পারে।
Example: Parent থেকে Child কম্পোনেন্টে মেথড পাঠানো
Parent.riot (Parent কম্পোনেন্ট):
<!-- Parent.riot -->
<parent-component>
<child-component ref={child} on-click={handleChildClick}></child-component>
<script>
import ChildComponent from './Child.riot';
export default {
handleChildClick() {
console.log('Child clicked');
},
onMounted() {
this.child.changeMessage('Message from Parent');
}
}
</script>
</parent-component>
Child.riot (Child কম্পোনেন্ট):
<!-- Child.riot -->
<child-component>
<h1>{message}</h1>
<button onclick={handleClick}>Click Me</button>
<script>
export default {
message: 'Initial Message',
handleClick() {
this.emit('click');
},
changeMessage(newMessage) {
this.message = newMessage;
}
}
</script>
</child-component>
এখানে, Parent কম্পোনেন্ট changeMessage ফাংশনটি Child কম্পোনেন্টে পাঠাচ্ছে এবং এটি Child কম্পোনেন্টের মেসেজ পরিবর্তন করছে।
Riot.js-এ Parent-Child Components এর মধ্যে ইভেন্ট আদান-প্রদান একটি সহজ এবং কার্যকরী প্রক্রিয়া। Parent কম্পোনেন্ট Child কম্পোনেন্টে ডাটা পাঠাতে প্রপস ব্যবহার করে এবং Child কম্পোনেন্ট থেকে Parent কম্পোনেন্টে ইভেন্ট পাঠাতে this.emit() ব্যবহার করে। এই ইভেন্ট আদান-প্রদান পদ্ধতিটি React, Vue বা অন্যান্য কম্পোনেন্ট-ভিত্তিক ফ্রেমওয়ার্কের সাথে তুলনামূলকভাবে সহজ এবং পরিষ্কার।
আপনি যদি আরও কিছু জানতে চান বা একটি নির্দিষ্ট প্রশ্ন থাকে, তাহলে আমাকে জানাতে পারেন!
Read more
