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>

 

४। 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 मापनयोग्य अनुप्रयोगहरू निर्माण गर्नको लागि एक शक्तिशाली ढाँचा बनाउनुहोस्।