В чем суть компонентов в Vue.js?

Frontend developer Vue.js
1

Услышал что в vue.js есть разбиение на компоненты, мне интересно как можно создать компонент vue, и что такое по сути этот компонент?

2

Это одна из важных концепций Vue, с помощью компонентов можно собирать большие приложения из более маленьких кусочков, то есть это пригодные к реюзу объекты.

В Vue компонентом является экземпляр vue у которого предустановлены определенные опции, создать такой объект можно вот так:

Vue.component('menu-list', {

    props: ['menu'],

    template:  '
  • {{ menu.text }}
    • '     
    
            ''
    

    
    })
    

    
    var component_block = new Vue({
    
        el: '#component_block',
    
        data: {
    
            menuItems: [
    
            {      text: 'Отбивная' },
    
                {  text: 'Картофель' },
    
                {  text: 'Спагетти' },
    
                {  text: 'Карбонара' },
    
                {  text: 'Борщь' }
    
        ]
    
    }
    
})

    <div id="component_block">
    
    
      

      
        <menu-list
      
                

    v-for="item in menuItems"
    
                    v-bind:menu="item"
    
                    >