close

Components v Vue.js: ustvarjanje, ponovna uporaba in posredovanje podatkov

Components so ključni koncept v Vue.js, ki vam omogoča izdelavo strukturiranih spletnih aplikacij, ki jih je mogoče vzdrževati. Z components, lahko svojo aplikacijo razdelite na majhne, ​​samostojne dele, od katerih je vsak odgovoren za določen del uporabniškega vmesnika.

V tem članku bomo raziskali, kako ustvariti components v Vue.js, jih uporabiti za ponovno uporabo kode in prenašati podatke med components. Poglobili se bomo v uporabo props za prenos podatkov iz nadrejene komponente v podrejeno komponento in uporabo dogodkov za prenos podatkov iz podrejene komponente nazaj na njeno nadrejeno komponento.

 

1. Ustvarjanje Components

Components v Vue.js lahko ustvarite z metodo `Vue.component` ali z definiranjem ene datoteke components. 

 primer:  

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

Komponenta Vue je sestavljena iz predloge, skripta in neobveznih slogov. Predloga vsebuje oznako HTML, skript vsebuje možnosti komponente(podatke, metode, izračunane lastnosti, kljuke življenjskega cikla), slogi pa določajo videz komponente.

primer:

<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. Možnost ponovne uporabe komponent

Components v Vue.js lahko ponovno uporabite v svoji aplikaciji, s čimer zmanjšate podvajanje kode in izboljšate vzdržljivost. Spodbujajo modularni pristop, ki vam omogoča sestavljanje manjših components v večje.

primer:

// 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 omogočajo prenos podatkov od starša components do otroka components. Props so deklarirane v podrejeni komponenti in se lahko uporabljajo kot običajne lastnosti podatkov.

primer:

// 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. Dogodki po meri

Components lahko oddaja dogodke po meri za komunikacijo s svojim staršem components. Starši components lahko prisluhnejo tem dogodkom in se ustrezno odzovejo.

primer:

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

 

Ti primeri prikazujejo ključne koncepte Vue.js components, prikazujejo njihovo prilagodljivost, ponovno uporabnost in komunikacijske zmožnosti. Components pomagajo ustvariti modularno kodo, ki jo je mogoče vzdrževati, zaradi česar je Vue.js zmogljivo ogrodje za gradnjo razširljivih aplikacij.