Vue komponentlari

Komponentlar nima?

Komponentlar qayta foydalanish mumkin bo‘lgan va o‘z-o‘zidan tuzilgan kod bo‘laklari bo‘lib, u foydalanuvchi interfeysining ma’lum bir qismini qamrab oladi, shuning uchun biz Vue ilovalarini kengaytiriladigan va texnik xizmat ko‘rsatishni osonlashtiramiz.

Biz Vue-da komponentlarni o‘zimiz yaratishimiz yoki keyinroq bilib oladigan o‘rnatilgan komponentlardan foydalanishimiz mumkin, masalan, <Teleport> yoki <KeepAlive>. Bu yerda biz o‘zimiz ishlab chiqaradigan komponentlarga e’tibor qaratamiz.

Komponent yaratish

Vue-dagi komponentlar juda kuchli vositadir, chunki u bizning veb-sahifamizni yanada kengaytirilishiga va kattaroq loyihalarni boshqarishni osonlashtiradi.

Keling, komponent yarataylik va uni loyihamizga qo‘shamiz.

1. src papkasida yangi papka komponentlarini yarating.

2. Komponentlar papkasida yangi FoodItem.vue faylini yarating. Komponentlarni PascalCase nomlash konventsiyasi bo‘yicha, bo‘sh joysiz va barcha yangi so‘zlar bosh harf bilan boshlanadigan, shuningdek birinchi so‘z bilan nomlash odatiy holdir.

3. FoodItem.vue fayli quyidagicha ko‘rinishiga ishonch hosil qiling:

<template>
  <div>
    <h2>{{ name }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples'
    }
  }
};
</script>

<style></style>

Yuqoridagi misolda ko‘rib turganingizdek, komponentlar ham xuddi bizning asosiy App.vue faylimiz kabi <template> , <script> va <style> teglaridan iborat.

Komponentni qo‘shish

Yuqoridagi misoldagi <script> tegi export default bilan boshlanganiga e’tibor bering. Bu ma’lumotlar xususiyatlarini o‘z ichiga olgan obyektni boshqa faylda qabul qilish yoki import qilish mumkinligini anglatadi. Biz bundan FoodItem.vue komponentini main.js fayli bilan import qilish orqali mavjud loyihamizga kiritish uchun foydalanamiz.

Birinchidan, asl main.js faylingizdagi oxirgi qatorni ikki qatorga qayta yozing:

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')

Endi main.js faylingizga 4 va 7 qatorlarni kiritish orqali FoodItem.vue komponentini qo‘shing:

import { createApp } from 'vue'

import App from './App.vue'
import FoodItem from './components/FoodItem.vue'

const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')

7-qatorda komponent qo‘shiladi, shunda biz uni App.vue faylimizdagi <template> tegi ichida maxsus teg sifatida <food-item/> ishlatishimiz mumkin:

<template>
  <h1>Food</h1>
  <food-item/>
  <food-item/>
  <food-item/>
</template>

<script></script>

<style></style>

Va keling, App.vue faylidagi <style> tegiga biroz uslub qo‘shamiz. Ishlab natija serveri ishlayotganiga ishonch hosil qiling va natijani tekshiring.

<template>
  <h1>Food</h1>
  <food-item/>
  <food-item/>
  <food-item/>
</template>

<script></script>

<style>
  #app > div {
    border: dashed black 1px;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

Individual komponentlar

Vue-da komponentlar bilan ishlashda juda foydali va kuchli xususiyat shundan iboratki, biz oddiy JavaScript-da qilganimizdek, noyob identifikatorlar bilan elementlarni belgilamasdan turib, ularni individual tarzda tutishimiz mumkin. Vue avtomatik ravishda har bir komponentga alohida e’tibor qaratadi.

Keling, <div> elementlarni bosganimizda hisobga olinsin.

Bizning App.vue asosiy dastur faylimizga qo‘shilgan yagona narsa - bu CSS-da kursor kursorni ko‘tarayotganda ishora qilayotgan qo‘l kabi ko‘rinishi va bu qandaydir bosish funksiyasi mavjudligini anglatadi.

#app > div:hover {
  cursor: pointer;
}

FoodItem.vue komponent faylimizga count ma’lumotlar xossasini, <div> elementiga chertish tinglovchisini, hisoblagichni oshirish uchun bosish sodir bo‘lganda ishga tushirish usulini va hisoblashni ko‘rsatish uchun {{}} matn interpolyatsiyasini qo‘shishimiz kerak.

<template>
  <div v-on:click="countClicks">
    <h2>{{ name }}</h2>  
    <p>{{ message }}</p>
    <p id="red">You have clicked me {{ clicks }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples',
      clicks: 0
    }
  },
  methods: {
    countClicks() {
      this.clicks++;
    }
  }
}
</script>

<style>
  #red {
    font-weight: bold ;
    color: rgb(144, 12, 12);
  }
</style>

Biz Vue uchun har bir <div> element uchun alohida hisoblashni boshqarishi uchun noyob identifikatorlarni belgilashimiz yoki qo‘shimcha ishlarni bajarishimiz shart emas, Vue buni faqat avtomatik tarzda bajaradi.

Ammo turli xil hisoblagich qiymatlaridan tashqari, <div> elementlarning mazmuni hali ham bir xil. Keyingi sahifada biz komponentlar haqida ko‘proq ma’lumotga ega bo‘lamiz, shunda biz tarkibiy qismlardan yanada mantiqiyroq foydalanishimiz mumkin. Misol uchun, har bir <div> elementida har xil turdagi taomlarni ko‘rsatish mantiqiyroq bo‘ladi.

<template>
  <h1>Fish</h1>
  
</template>