Components Vue.js में: डेटा बनाना, पुन: उपयोग करना और पास करना

Components Vue.js में एक महत्वपूर्ण अवधारणा है जो आपको संरचित और रखरखाव योग्य वेब एप्लिकेशन बनाने की अनुमति देती है। के साथ components, आप अपने एप्लिकेशन को छोटे, स्व-निहित भागों में विभाजित कर सकते हैं, जिनमें से प्रत्येक उपयोगकर्ता इंटरफ़ेस के एक विशिष्ट भाग के लिए जिम्मेदार है।

components इस आलेख में, हम यह पता लगाएंगे कि Vue.js में कैसे बनाएं, कोड का पुन: उपयोग करने के लिए उनका उपयोग कैसे करें, और बीच में डेटा कैसे पास करें 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 स्केलेबल अनुप्रयोगों के निर्माण के लिए एक शक्तिशाली ढांचा बन जाएगा।