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 کو توسیع پذیر ایپلی کیشنز بنانے کے لیے ایک طاقتور فریم ورک بناتا ہے۔