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 ને સ્કેલેબલ એપ્લીકેશન બનાવવા માટે એક શક્તિશાળી ફ્રેમવર્ક બનાવીને મોડ્યુલર અને જાળવણી કરી શકાય તેવા કોડ બનાવવામાં મદદ કરો.