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 हे स्केलेबल ऍप्लिकेशन्स तयार करण्यासाठी एक शक्तिशाली फ्रेमवर्क बनते.