close

Components u Vue.js: Stvaranje, ponovna upotreba i prosljeđivanje podataka

Components ključni su koncept u Vue.js koji vam omogućuje izgradnju strukturiranih web aplikacija koje se mogu održavati. Pomoću components, možete rastaviti svoju aplikaciju na male, samostalne dijelove, od kojih je svaki odgovoran za određeni dio korisničkog sučelja.

U ovom ćemo članku istražiti kako izraditi components u Vue.js, koristiti ih za ponovnu upotrebu koda i proslijediti podatke između components. Udubit ćemo se u korištenje props prijenosa podataka od nadređene komponente do podređene komponente i korištenje događaja za prijenos podataka od podređene komponente natrag do njezine nadređene komponente.

 

1. Stvaranje Components

Components u Vue.js može se stvoriti pomoću metode `Vue.component` ili definiranjem pojedinačne datoteke components. 

 Primjer:  

// 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. Struktura komponenti

Komponenta Vue sastoji se od predloška, ​​skripte i izbornih stilova. Predložak sadrži HTML oznake, skripta sadrži opcije komponente(podatke, metode, izračunata svojstva, kuke životnog ciklusa), a stilovi definiraju izgled komponente.

Primjer:

<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. Mogućnost ponovne upotrebe komponente

Components u Vue.js može se ponovno koristiti u vašoj aplikaciji, smanjujući dupliranje koda i poboljšavajući mogućnost održavanja. Oni promoviraju modularni pristup, omogućujući vam da sastavite manje components u veće.

Primjer:

// 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 omogućuju prijenos podataka od roditelja components do djeteta components. Props deklariraju se u podređenoj komponenti i mogu se koristiti kao obična svojstva podataka.

Primjer:

// 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. Prilagođeni događaji

Components može emitirati prilagođene događaje za komunikaciju sa svojim roditeljem components. Roditelj components može slušati te događaje i reagirati u skladu s tim.

Primjer:

// 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>

 

Ovi primjeri prikazuju ključne koncepte Vue.js components, pokazujući njihovu fleksibilnost, mogućnost ponovne upotrebe i komunikacijske mogućnosti. Components pomoći u stvaranju modularnog koda koji se može održavati, čineći Vue.js moćnim okvirom za izgradnju skalabilnih aplikacija.