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 ஐ அளவிடக்கூடிய பயன்பாடுகளை உருவாக்குவதற்கான சக்திவாய்ந்த கட்டமைப்பாக மாற்றுகிறது.