close

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 ਨੂੰ ਸਕੇਲੇਬਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਫਰੇਮਵਰਕ ਬਣਾਉਂਦੇ ਹੋਏ।