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 من قالب ونصوص وأنماط اختيارية. يحتوي القالب على ترميز HTML ، ويحتوي البرنامج النصي على خيارات المكون(البيانات ، والأساليب ، والخصائص المحسوبة ، وخطافات دورة الحياة) ، والأنماط تحدد مظهر المكون.

مثال:

<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 إطار عمل قويًا لبناء تطبيقات قابلة للتطوير.