Components Vue.jsలో: సృష్టించడం, తిరిగి ఉపయోగించడం మరియు డేటా పాస్ చేయడం

Components నిర్మాణాత్మక మరియు నిర్వహించదగిన వెబ్ అప్లికేషన్‌లను రూపొందించడానికి మిమ్మల్ని అనుమతించే Vue.jsలో కీలకమైన భావన. తో components, మీరు మీ అప్లికేషన్‌ను చిన్న, స్వీయ-నియంత్రణ భాగాలుగా విభజించవచ్చు, ప్రతి ఒక్కటి వినియోగదారు ఇంటర్‌ఫేస్‌లోని నిర్దిష్ట భాగానికి బాధ్యత వహిస్తుంది.

ఈ కథనంలో, మేము Vue.jsలో ఎలా సృష్టించాలో components, కోడ్‌ని మళ్లీ ఉపయోగించేందుకు మరియు మధ్య డేటాను పాస్ చేయడానికి వాటిని ఎలా ఉపయోగించాలో అన్వేషిస్తాము components. props పేరెంట్ కాంపోనెంట్ నుండి చైల్డ్ కాంపోనెంట్‌కు డేటాను పాస్ చేయడం మరియు చైల్డ్ కాంపోనెంట్ నుండి డేటాను దాని పేరెంట్ కాంపోనెంట్‌కి బ్యాకప్ చేయడానికి ఈవెంట్‌లను ఉపయోగించడం గురించి మేము పరిశీలిస్తాము .

 

1. సృష్టిస్తోంది Components

Components Vue.jsలో `Vue.component` పద్ధతిని ఉపయోగించి లేదా సింగిల్-ఫైల్‌ని నిర్వచించడం ద్వారా సృష్టించవచ్చు components. 

 ఉదాహరణ: 

// 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. కాంపోనెంట్ స్ట్రక్చర్

Vue భాగం టెంప్లేట్, స్క్రిప్ట్ మరియు ఐచ్ఛిక శైలులను కలిగి ఉంటుంది. టెంప్లేట్ HTML మార్కప్‌ను కలిగి ఉంటుంది, స్క్రిప్ట్‌లో కాంపోనెంట్ ఎంపికలు(డేటా, పద్ధతులు, కంప్యూటెడ్ ప్రాపర్టీలు, లైఫ్‌సైకిల్ హుక్స్) ఉన్నాయి మరియు స్టైల్స్ కాంపోనెంట్ యొక్క రూపాన్ని నిర్వచిస్తాయి.

ఉదాహరణ:

<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. భాగం పునర్వినియోగం

Components Vue.jsలో కోడ్ డూప్లికేషన్‌ను తగ్గించడం మరియు మెయింటెనబిలిటీని మెరుగుపరచడం ద్వారా మీ అప్లికేషన్ అంతటా మళ్లీ ఉపయోగించవచ్చు. అవి మాడ్యులర్ విధానాన్ని ప్రోత్సహిస్తాయి, చిన్నవిగా components పెద్దవిగా కంపోజ్ చేయడానికి మిమ్మల్ని అనుమతిస్తాయి.

ఉదాహరణ:

// 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 components తల్లిదండ్రుల నుండి పిల్లలకు డేటాను పంపడానికి మిమ్మల్ని అనుమతిస్తుంది components. Props చైల్డ్ కాంపోనెంట్‌లో డిక్లేర్ చేయబడతాయి మరియు సాధారణ డేటా లక్షణాల వలె ఉపయోగించవచ్చు.

ఉదాహరణ:

// 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. కస్టమ్ ఈవెంట్‌లు

Components వారి తల్లిదండ్రులతో కమ్యూనికేట్ చేయడానికి అనుకూల ఈవెంట్‌లను విడుదల చేయవచ్చు components. తల్లిదండ్రులు components ఈ సంఘటనలను వినవచ్చు మరియు తదనుగుణంగా ప్రతిస్పందించవచ్చు.

ఉదాహరణ:

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

 

ఈ ఉదాహరణలు Vue.js యొక్క ముఖ్య భావనలను ప్రదర్శిస్తాయి components, వాటి సౌలభ్యం, పునర్వినియోగం మరియు కమ్యూనికేషన్ సామర్థ్యాలను ప్రదర్శిస్తాయి. Components స్కేలబుల్ అప్లికేషన్‌లను రూపొందించడానికి Vue.jsని శక్తివంతమైన ఫ్రేమ్‌వర్క్‌గా మార్చడం ద్వారా మాడ్యులర్ మరియు మెయింటెనబుల్ కోడ్‌ని రూపొందించడంలో సహాయం చేస్తుంది.