Components Vue.js-এ: তৈরি করা, পুনরায় ব্যবহার করা এবং ডেটা পাস করা

Components Vue.js-এ একটি গুরুত্বপূর্ণ ধারণা যা আপনাকে কাঠামোগত এবং রক্ষণাবেক্ষণযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরি করতে দেয়। এর সাথে components, আপনি আপনার অ্যাপ্লিকেশনকে ছোট, স্বয়ংসম্পূর্ণ অংশে বিভক্ত করতে পারেন, প্রতিটি ব্যবহারকারী ইন্টারফেসের একটি নির্দিষ্ট অংশের জন্য দায়ী।

এই নিবন্ধে, আমরা কীভাবে components Vue.js-এ তৈরি করব, কোড পুনঃব্যবহারের জন্য সেগুলি ব্যবহার করব এবং এর মধ্যে ডেটা পাস করব components । আমরা props একটি পিতামাতার উপাদান থেকে একটি শিশু উপাদানে ডেটা পাস করার জন্য এবং একটি শিশু উপাদান থেকে তার মূল উপাদানে ব্যাক আপ করার জন্য ইভেন্টগুলি ব্যবহার করার জন্য ব্যবহার করব।

 

1. তৈরি করা Components

Components Vue.js-এ `Vue.component` পদ্ধতি ব্যবহার করে বা একক-ফাইল সংজ্ঞায়িত করে তৈরি করা যেতে পারে components । 

 উদাহরণ: 

// Global Component using Vue.component  
Vue.component('my-component', {  
  // Component options  
});  
  
// Local Component using single-file component  
// MyComponent.vue  
<template>  
  <!-- Component template -->  
</template>  
  
<script>  
export default {  
  // Component options  
};  
</script>

 

2. উপাদান গঠন

একটি Vue উপাদান একটি টেমপ্লেট, স্ক্রিপ্ট এবং ঐচ্ছিক শৈলী নিয়ে গঠিত। টেমপ্লেটটিতে এইচটিএমএল মার্কআপ রয়েছে, স্ক্রিপ্টে উপাদান বিকল্পগুলি রয়েছে(ডেটা, পদ্ধতি, গণনা করা বৈশিষ্ট্য, জীবনচক্র হুক) এবং শৈলীগুলি উপাদানটির উপস্থিতি সংজ্ঞায়িত করে।

উদাহরণ:

<template>  
  <div>  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!',  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* Component styles */  
</style>

 

3. উপাদান পুনর্ব্যবহারযোগ্যতা

Components Vue.js-এ আপনার অ্যাপ্লিকেশন জুড়ে পুনরায় ব্যবহার করা যেতে পারে, কোড ডুপ্লিকেশন হ্রাস করে এবং রক্ষণাবেক্ষণযোগ্যতা উন্নত করে। তারা একটি মডুলার পদ্ধতির প্রচার করে, যা আপনাকে ছোট components থেকে বড়ে রচনা করতে দেয়।

উদাহরণ:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component></child-component>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

 

4. Props

Props components আপনাকে পিতামাতা থেকে সন্তানের কাছে ডেটা প্রেরণ করার অনুমতি দেয় components । Props চাইল্ড কম্পোনেন্টে ঘোষণা করা হয় এবং নিয়মিত ডেটা বৈশিষ্ট্যের মতো ব্যবহার করা যেতে পারে।

উদাহরণ:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component:message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent!'  
    };  
  }  
};  
</script>  
  
// ChildComponent.vue  
<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

 

5. কাস্টম ইভেন্ট

Components তাদের পিতামাতার সাথে যোগাযোগ করতে কাস্টম ইভেন্টগুলি নির্গত করতে পারে components ৷ পিতামাতা components এই ঘটনাগুলি শুনতে এবং সেই অনুযায়ী প্রতিক্রিয়া জানাতে পারেন।

উদাহরণ:

// ChildComponent.vue  
<template>  
  <div>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    increment() {  
      this.$emit('increment-event');  
    }  
  }  
};  
</script>  
  
// ParentComponent.vue  
<template>  
  <div>  
    <child-component @increment-event="handleIncrement"></child-component>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    handleIncrement() {  
      this.count++;  
    }  
  }  
};  
</script>

 

এই উদাহরণগুলি Vue.js এর মূল ধারণাগুলি প্রদর্শন করে components, তাদের নমনীয়তা, পুনঃব্যবহারযোগ্যতা এবং যোগাযোগের ক্ষমতা প্রদর্শন করে। Components মডুলার এবং রক্ষণাবেক্ষণযোগ্য কোড তৈরি করতে সাহায্য করে, যা Vue.js কে স্কেলযোগ্য অ্যাপ্লিকেশন তৈরির জন্য একটি শক্তিশালী কাঠামো তৈরি করে।