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. Custom Events

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-ს აქცევს მძლავრ ჩარჩოს მასშტაბირებადი აპლიკაციების შესაქმნელად.