Components এর মধ্যে ডেটা প্রেরণ করা (Props)

Riot.js-এ Components এর মধ্যে ডেটা প্রেরণ (Props) করার জন্য opts (options) ব্যবহার করা হয়। এটি Parent Component থেকে Child Component-এ ডেটা পাস করার একটি সহজ এবং কার্যকর পদ্ধতি।

Props এর মাধ্যমে ডেটা প্রেরণ

Riot.js-এ Props হল Parent Component থেকে Child Component-এ প্রেরিত ডেটা। opts এর মাধ্যমে এটি একসাথে উপস্থাপন করা হয়। Child Component এর মধ্যে এই opts ব্যবহার করে Parent থেকে প্রাপ্ত ডেটা অ্যাক্সেস করা হয়।

উদাহরণ: Parent থেকে Child Component এ Props প্রেরণ

এখানে আমরা একটি Parent Component এবং একটি Child Component তৈরি করব, যেখানে Parent Component থেকে Child Component-এ ডেটা পাস করা হবে।

১. Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Props পাস করা হচ্ছে Child Component-এ -->
  <child-component title="Hello, Child!" message={parentMessage}></child-component>

  <button onclick={changeMessage}>Change Message</button>

  <script>
    import './Child.riot';

    export default {
      onMounted() {
        this.parentMessage = 'This is a message from Parent Component';
      },

      changeMessage() {
        this.parentMessage = 'The message has been updated!';
      }
    }
  </script>
</app>

এখানে:

• parentMessage হল একটি ডেটা যা Parent Component এর মধ্যে সংরক্ষিত, এবং এটি message নামক Props হিসেবে Child Component-এ পাস করা হচ্ছে।
• title="Hello, Child!" একটি স্ট্যাটিক Props যা Child Component-এ পাস করা হচ্ছে।

২. Child Component (Child.riot)

<!-- src/components/Child.riot -->
<child-component>
  <h2>{opts.title}</h2>
  <p>{opts.message}</p>

  <button onclick={sendMessage}>Send Message to Parent</button>

  <script>
    export default {
      sendMessage() {
        this.emit('childMessage', 'Hello, Parent! This is a message from Child!');
      }
    }
  </script>
</child-component>

এখানে:

• opts.title এবং opts.message ব্যবহার করে Parent Component থেকে Child Component-এ পাস করা ডেটা অ্যাক্সেস করা হচ্ছে।
• sendMessage ফাংশনটি childMessage নামক একটি কাস্টম ইভেন্ট তৈরি করে, যা Parent Component-এ পাঠানো হবে।

৩. Parent Component থেকে Child Component এর ইভেন্ট গ্রহণ

আমরা Parent Component-এ childMessage ইভেন্টটি লিসেন করতে পারি এবং Child Component থেকে ডেটা গ্রহণ করতে পারি।

৩.১. Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Props পাস করা হচ্ছে Child Component-এ -->
  <child-component title="Hello, Child!" message={parentMessage} onchildMessage={handleChildMessage}></child-component>

  <p>{childMessage}</p>

  <button onclick={changeMessage}>Change Message</button>

  <script>
    import './Child.riot';

    export default {
      onMounted() {
        this.parentMessage = 'This is a message from Parent Component';
        this.childMessage = '';
      },

      changeMessage() {
        this.parentMessage = 'The message has been updated!';
      },

      handleChildMessage(event) {
        this.childMessage = event.detail; // Child থেকে প্রাপ্ত বার্তা
      }
    }
  </script>
</app>

এখানে:

• onchildMessage={handleChildMessage} দ্বারা Parent Component-এ childMessage নামক ইভেন্ট গ্রহণ করা হচ্ছে।
• handleChildMessage ফাংশনে event.detail দ্বারা Child থেকে পাওয়া ডেটা নেয়া হচ্ছে এবং সেটি childMessage এ সংরক্ষিত হচ্ছে, যা HTML-এ দেখানো হচ্ছে।

সারাংশ

1. Props পাস করা: Parent Component থেকে Child Component-এ ডেটা পাঠাতে opts ব্যবহার করা হয়। উদাহরণস্বরূপ, {parentMessage}।
2. Child Component-এ Props অ্যাক্সেস করা: Child Component-এ opts অবজেক্ট ব্যবহার করে Parent থেকে প্রাপ্ত ডেটা অ্যাক্সেস করা হয়।
3. কাস্টম ইভেন্ট: Child Component থেকে Parent Component-এ ডেটা পাঠাতে emit ব্যবহার করা হয়। Parent Component এই ইভেন্টটি গ্রহণ করতে পারে এবং ডেটা ব্যবহার করতে পারে।

এভাবে Riot.js-এ Parent এবং Child Components এর মধ্যে ডেটা প্রেরণ এবং গ্রহণ করা হয়।