close

Components f'Vue.js: Ħolqien, Użu mill-ġdid, u Tgħaddi tad-Data

Components huma kunċett kruċjali f'Vue.js li jippermettilek tibni applikazzjonijiet tal-web strutturati u li jistgħu jinżammu. Bil- components, tista' tkisser l-applikazzjoni tiegħek f'partijiet żgħar u awtonomi, kull waħda responsabbli għal porzjon speċifiku tal-interface tal-utent.

F'dan l-artikolu, se nesploraw kif noħolqu components f'Vue.js, nużawhom biex nużaw mill-ġdid il-kodiċi, u ngħaddu d-dejta bejn components. Aħna se nidħlu fl-użu props biex ngħaddu d-dejta minn komponent ġenitur għal komponent tifel, u nużaw avvenimenti biex ngħaddu d-dejta minn komponent tifel lura għall-komponent parent tiegħu.

 

1. Il-ħolqien Components

Components f'Vue.js jistgħu jinħolqu bl-użu tal-metodu `Vue.component` jew billi jiġi definit single-file components. 

 Eżempju:  

// 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. Struttura tal-Komponent

Komponent Vue jikkonsisti minn mudell, skript, u ​​stili fakultattivi. Il-mudell fih il-markup HTML, l-iskrittura fih l-għażliet tal-komponenti(dejta, metodi, proprjetajiet ikkalkulati, ganċijiet taċ-ċiklu tal-ħajja), u l-istili jiddefinixxu d-dehra tal-komponent.

Eżempju:

<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. Użabbiltà mill-ġdid tal-komponenti

Components f'Vue.js jista' jerġa' jintuża fl-applikazzjoni tiegħek, inaqqas id-duplikazzjoni tal-kodiċi u jtejjeb il-manutenzjoni. Huma jippromwovu approċċ modulari, li jippermettilek tikkomponi iżgħar components f'oħrajn akbar.

Eżempju:

// 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 jippermettulek tgħaddi d-data minn ġenitur components għal wild components. Props huma ddikjarati fil-komponent tifel u jistgħu jintużaw bħal proprjetajiet ta 'dejta regolari.

Eżempju:

// 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. Avvenimenti tad-dwana

Components jistgħu jarmu avvenimenti tad-dwana biex jikkomunikaw mal-ġenitur tagħhom components. Il-ġenituri components jistgħu jisimgħu dawn l-avvenimenti u jirreaġixxu kif xieraq.

Eżempju:

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

 

Dawn l-eżempji juru l-kunċetti ewlenin ta’ Vue.js components, u juru l-flessibbiltà, l-użu mill-ġdid u l-kapaċitajiet ta’ komunikazzjoni tagħhom. Components jgħin fil-ħolqien ta 'kodiċi modulari u li jista' jinżamm, li jagħmel Vue.js qafas b'saħħtu għall-bini ta 'applikazzjonijiet skalabbli.