Vue-ում որդեգիր կոմպոնենտների ստեղծում

Կոմպոնենտները ներքուստ ունեն նույն կառուցվածքը, ինչ հիմնական կոմպոնենտը, որի հետ մենք աշխատել էինք նախկինում: Այսինքն յուրաքանչյուր կոմպոնենտի ֆայլում կլինեն script և template թեգերը:

Օրինակի համար եկեք ստեղծենք User անվանումով կոմպոնենտ: Տեղադրենք դրա կոդը համապատասխան ֆայլում:

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

Կոմպոնենտի data օբյեկտում կարելի է տեղադրել որոշ տվյալներ:

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

Այս տվյալները կարելի է արտածել կոմպոնենտի ներկայացման մեջ:

components/User.vue<template>
  {{ name }}
</template>

Եկեք այժմ միացնենք մեր ստեղծած կոմպոնենտը հիմնական կոմպոնենտին: Դրա համար նախ պետք է իմպորտ անել այն:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

Գրենք դրա անունը components կարգաբերման մեջ:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

Ծնող կոմպոնենտի ներկայացման մեջ կարելի է արտածել որդեգիր կոմպոնենտի ներկայացումը: Դրա համար պետք է գրել թեգ, որի անունը համապատասխանում է կոմպոնենտի անվանը: Եկեք անենք դա:

App.vue<template>
  <User />
</template>