प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

आमुख

Vue 3 Composition API इत्यस्य परिचयं करोति, यत् घटकसञ्चारस्य कृते नूतनं लचीलतां शक्तिं च आनयति ।

घटक संचार मूलभूत बातें

घटकानां परिभाषा कार्यं च

अग्रभागे विकासे घटकाः स्वतन्त्राः एककाः इति चिन्तयितुं शक्यन्ते ये उपयोक्तृ-अन्तरफलकं निर्मान्ति । एतत् विशिष्टकार्यक्षमतां शैल्याः च समाहितं करोति, पुनः उपयोक्तुं शक्यते, अन्यभागेभ्यः स्वतन्त्रतया विकसितुं परीक्षितुं च शक्यते । घटकानां मुख्यं कार्यं कोडपुनःप्रयोगक्षमता, परिपालनक्षमता, मापनीयता च सुधारयितुम् अस्ति । अन्तरफलकं बहुघटकेषु विभज्य विकासकाः जटिल-अनुप्रयोगानाम् अधिकसुलभतया प्रबन्धनं कर्तुं शक्नुवन्ति, तथा च समग्र-विकास-दक्षतां अनुप्रयोग-प्रदर्शनं च सुधारयितुम् प्रत्येकं घटकं अनुकूलितं कर्तुं शक्यते

घटकवृक्षः मातापितृसन्ततिघटकसम्बन्धः च

Vue.js इत्यादिषु अग्रभागेषु ढाञ्चेषु घटकवृक्षं निर्मातुं घटकान् नेस्ट् कर्तुं शक्यते । अस्मिन् वृक्षसंरचने प्रत्येकस्य घटकस्य उपघटकाः भवितुम् अर्हन्ति, एतेषां उपघटकानाम् अपि स्वकीयाः उपघटकाः भवितुम् अर्हन्ति, येन श्रेणीबद्धसंरचना भवति । एषा संरचना घटकानां मध्ये सम्बन्धं स्पष्टं करोति, प्रबन्धनस्य, अनुरक्षणस्य च सुविधां करोति ।

• मातापितृ-सन्तति-घटक-सम्बन्धः : घटकवृक्षे घटकः अन्यं घटकं निर्मातुम् अर्हति अस्मिन् सन्दर्भे निर्माता मातापितृघटकः इति उच्यते, निर्मितः घटकः बालघटकः इति उच्यते । मातापितृघटकाः बालघटकेभ्यः दत्तांशं विधिं च पारयितुं शक्नुवन्ति, बालघटकाः च घटनाद्वारा मातापितृघटकेभ्यः सूचनां प्रेषयितुं शक्नुवन्ति । एषः मातापितृसन्ततिसम्बन्धः घटकसञ्चारस्य आधारः अस्ति ।
• भ्रातृघटकसम्बन्धः : एकस्यैव मातापितृघटकस्य अन्तर्गतं बहुविधाः बालघटकाः भ्रातृघटकसम्बन्धाः सन्ति । भ्रातृघटकाः परस्परं प्रत्यक्षतया संवादं कर्तुं न शक्नुवन्ति, तेषां मध्ये संचारः प्रायः मातापितृघटकद्वारा प्रसारयितुं आवश्यकः भवति ।
• पूर्वजः वंशजघटकसम्बन्धः : घटकवृक्षे मातापितृघटकस्य मातापितृघटकः पूर्वजघटकः, बालघटकस्य बालघटकः च वंशजघटकः गभीररूपेण नीडितघटकानाम् व्यवहारे अयं सम्बन्धः विशेषतया महत्त्वपूर्णः भवति ।

घटकवृक्षाणां अवधारणाः मातापितृ-सन्ततिघटकसम्बन्धाः च घटकसञ्चारस्य अवगमनाय महत्त्वपूर्णाः सन्ति । एतेषु मूलभूतज्ञानेषु निपुणता विकासकान् घटकानां मध्ये संचारतन्त्राणि अधिकप्रभावितेण परिकल्पयितुं कार्यान्वितुं च साहाय्यं कर्तुं शक्नोति ।

मातापितृ-बाल-घटक-सञ्चार (Vue 3) .

मातापिता बालकं प्रति दत्तांशं प्रसारयति (Props)

प्रॉप्स् इति किम्
प्रोप्स् इति मातापितृघटकानाम् एकं तन्त्रं यत् ते बालघटकेभ्यः दत्तांशं प्रसारयन्ति ।Vue 3 इत्यस्मिन् प्रयोगःdefinePropsएपिआइ इत्यस्य उपयोगः रिसीविंग प्रोप्स् घोषयितुं भवति, यत् दत्तांशस्य एकदिशाप्रवाहं निर्वाहयति तथा च घटकानां स्वातन्त्र्यं पुनःप्रयोगं च सुनिश्चितं करोति ।

मातापितृघटके props कथं पारितव्यम्
मातापितृघटकस्य टेम्पलेट् मध्ये, उपयोगं कुर्वन्तुv-bindसंक्षेपः वा:दत्तांशं बन्धयितुं : १.

<template>
   <ChildComponent :my-prop="parentData" />
</template>

अत्र,:my-propएषः गतिशीलरूपेण बद्धः प्रोप् इति सूचयति,parentDataमातापितृघटके दत्तांशः परिभाषितः अस्ति वा。

बालघटके प्रोप्स् कथं प्राप्नुयात्
बालघटके प्रयोगःdefinePropsप्राप्तानि प्रॉप्स् घोषयितुं : १.

<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
   myProp: String
});
</script>

अस्ति<script setup>वाक्यविन्यासशर्करायां .definePropsस्वयमेव घटकस्य प्रतिक्रियाशीलगुणत्वेन प्रोप्स् उजागरयिष्यति。

बालकः मातापितरं (Emit) इत्यस्मै आयोजनं पारयति।

यत् उत्सर्जितम्
Emit इति बालघटकानाम् एकं तन्त्रं यत् ते मातापितृघटकेभ्यः सन्देशं प्रेषयन्ति ।Vue 3 इत्यस्मिन् प्रयोगःdefineEmitsएपिआइ इत्येतत् उत्सर्जयितुं शक्यमाणानि घटनानि घोषयितुं, उपयोगाय चemitघटनां प्रेरयितुं कार्यम्।

बालघटके इवेण्ट् कथं ट्रिगर करणीयम्
बालघटकस्य पद्धत्या प्रयोगः defineEmits उत्सर्जयितुं शक्यमाणानि घटनानि घोषयितुं, उपयोगाय च emit to trigger: .

<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['my-event']);
 
function triggerEvent() {
   emit('my-event', dataToPass);
}
</script>

defineEmitsघटकः उत्सर्जयितुं शक्नोति इति घटनां घोषयितुं उपयुज्यते, whileemitएतासां घटनानां प्रवर्तनार्थं कार्याणां उपयोगः भवति ।

मातापितृघटके बालघटकघटनानि कथं श्रोतव्यानि
मातापितृघटकस्य टेम्पलेट् मध्ये, .उपयुञ्जताम्‌v-onसंक्षेपः वा@ बालघटकैः उत्सर्जितानि घटनानि श्रोतुं :

<template>
   <ChildComponent @my-event="handleEvent" />
//或者<ChildComponent v-on:my-event="handleEvent" />
</template>

अत्र,@my-eventश्रवण उपघटकः उत्सर्जयति इति सूचयतिmy-eventघटना,handleEventइदं मातापितृघटके परिभाषितं विधिः अस्ति यदा घटना प्रवर्तते तदा एषा विधिः आह्वयते ।

व्यापकं उदाहरणम्

मातापितृघटकः अस्ति इति कल्पयतुParentComponentउपघटकं चChildComponent, मातापितृघटकस्य बालघटकं प्रति दत्तांशं पारयितुं आवश्यकं भवति, बालघटकेन च विशिष्टक्रियायाः अनन्तरं मातापितृघटकं सूचयितुं आवश्यकम् ।

मातापितृ घटकParentComponent.vue

<template>
   <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('initial data');
const handleChildEvent = (data) => {
   console.log('Received data from child:', data);
};
</script>

उपसभाChildComponent.vue

<template>
   <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps({
   myProp: String
});
 
const emit = defineEmits(['child-event']);
 
function sendDataToParent() {
   emit('child-event', props.myProp);
}
</script>

अस्मिन् उदाहरणे मातापितृघटकः उत्तीर्णः भवति:my-propबालघटकेषु दत्तांशं पारयन्तु, पारयन्तु च@child-event बालघटकैः उत्सर्जितानि घटनानि शृणुत।बालघटकः उत्तीर्णः भवतिdefinePropsमातापितृघटकेन पारितां सामग्रीं प्राप्नोतिmyProp, तथा च बटन् क्लिक् इवेण्ट् इत्यस्मिन् तस्य उपयोगं कुर्वन्तुemitमातापितृघटकं प्रति दत्तांशं प्रेषयन्तु।

Pinia (Vue 3 कृते राज्यप्रबन्धनपुस्तकालयस्य) उपयोगः

पिनिया इत्यस्य लाभाः विशेषताः च

Pinia Vue 3 कृते आधिकारिकतया अनुशंसितं राज्यप्रबन्धनपुस्तकालयम् अस्ति।एतत् अनुप्रयोगराज्यस्य प्रबन्धनार्थं घटक-आधारितं मार्गं प्रदाति । अत्र पिनिया इत्यस्य केचन प्रमुखाः लाभाः विशेषताः च सन्ति ।

• घटक एपिआइ: पिनिया घटक-आधारित एपिआइ स्वीकरोति, येन राज्यप्रबन्धनस्य घटकतर्कस्य च पृथक्करणं अधिकं स्वाभाविकं भवति ।
• TypeScript समर्थनम्: Pinia इत्यनेन आरम्भादेव TypeScript समर्थनं विचारितम्, TypeScript इत्यनेन सह विकासं कुर्वन् उत्तमं प्रकारानुमानं सम्पादकसमर्थनं च सक्षमं करोति ।
• मॉड्यूलर: पिनिया भवन्तं राज्यं बहुषु भण्डारेषु विभक्तुं शक्नोति, प्रत्येकं भण्डारं च स्वतन्त्रतया स्वकीयं राज्यं तर्कं च प्रबन्धयितुं शक्नोति ।
• समग्र एपिआइ संगत: पिनिया Vue 3 इत्यस्य Composition API इत्यनेन सह सम्यक् एकीकृतः अस्ति, येन राज्यप्रबन्धनस्य घटकतर्कस्य च पृथक्करणं अधिकं स्वाभाविकं भवति।
• समययात्रा त्रुटिनिवारणम्: Pinia समययात्रा त्रुटिनिवारणक्षमतां प्रदाति, येन विकासकाः सहजतया पश्चात्तापं कर्तुं राज्यपरिवर्तनानां निरीक्षणं च कर्तुं शक्नुवन्ति ।

पिनिया कथं स्थापयित्वा उपयोगः करणीयः

Pinia इत्यस्य उपयोगं आरभ्य प्रथमं Pinia इत्यस्य संस्थापनं करणीयम्:

npm install pinia

अथवा Yarn इत्यस्य उपयोगं कुर्वन्तु : १.

yarn add pinia

ततः, स्वस्य Vue अनुप्रयोगे Pinia स्थापयन्तु:

import { createPinia } from 'pinia';
 
const pinia = createPinia();
app.use(pinia);

भण्डारं रचयन्तु : १.

import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
 
    function increment() {
        count.value++;
    }
 
    return { count, increment };
});

घटके भण्डारस्य उपयोगं कुर्वन्तु:

<script setup>
import { useCounterStore } from '@/stores/counter';
 
const counterStore = useCounterStore();
</script>
 
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Increment</button>
    </div>
</template>

घटकैः सह पिनिया एकीकरणम्

घटकैः सह पिनियायाः एकीकरणं अतीव सरलं भवति, मुख्यतया माध्यमेनdefineStore भण्डारं निर्मातुं function इति । घटकेषु, भवान् प्रत्यक्षतया भण्डारे स्थितिं विधिं च उपयोक्तुं शक्नोति:

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter';
 
 
const counterStore = useCounterStore();
const { count, increment } = storeToRefs(counterStore);
//如果这里不使用storeToRefs会丢失响应式特性
</script>

उपरिष्टाद् उदाहरणे वयं प्रत्यक्षतया टेम्पलेट् मध्ये अभिगच्छामःcountकाउण्टर् मूल्यं प्रदर्शयितुं बटन् क्लिक् इवेण्ट् इत्यत्र आह्वयितुं चincrementगणकमूल्यं वर्धयितुं विधिः ।

Vue 3 अद्वितीय संचार विधि

प्रदातु/इञ्जेक्शन

Provide/Inject इत्यस्य मूलभूतः उपयोगः
वुए ३, ९.provideतथाinjectमातापितृ-बालघटकयोः मध्ये संचारस्य एकः पद्धतिः अस्ति यत् पूर्वजघटकं स्वस्य सर्वेषु वंशजघटकेषु आश्रयं प्रविष्टुं शक्नोति, घटकपदानुक्रमः कियत् गभीरः अस्ति इति न कृत्वा

• दत्तांशं प्रदातुम्: पूर्वजघटकप्रयोगःprovideकार्याणि दत्तांशं प्रदास्यन्ति।
• दत्तांशं प्रविष्टं कुर्वन्तु: वंशजघटकैः प्रयुक्तःinjectफंक्शन् डाटा इन्जेक्शन् करोति।

Provide/Inject इत्यस्य कृते प्रयोज्यपरिदृश्यानि
provideतथाinjectनिम्नलिखित परिदृश्येषु प्रयोज्यम् : १.

• यदा भवन्तः बहुस्तरं न गन्तुं इच्छन्तिpropsयदा दत्तांशं पारयति।
• यदा भवान् घटकवृक्षे बहुघटकाः दत्तांशं साझां कर्तुं इच्छन्ति ।

नमूना कोड：

// 祖先组件
export default {
  setup() {
    const message = 'Hello from Ancestor!';
    provide('message', message);
  }
}
 
// 子孙组件
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

दूरवाणी

टेलिपोर्ट् इत्यस्य अवधारणा, उपयोगः च
Teleportइदं Vue 3 इत्यस्मिन् योजितं नूतनं अन्तःनिर्मितं घटकम् अस्ति, यत् भवन्तं घटकस्य अन्तः टेम्पलेट् इत्यस्य भागं DOM इत्यस्मिन् अन्यस्मिन् स्थाने "संप्रेषणं" कर्तुं शक्नोति ।

घटकसञ्चारार्थं Teleport इत्यस्य उपयोगः कथं भवति
Teleport घटकानां मध्ये संचारार्थं न, अपितु घटकानां प्रतिपादनस्थानस्य नियन्त्रणार्थं उपयुज्यते ।परन्तु भवन्तः उपयोक्तुं शक्नुवन्तिTeleportघटकस्य भागान् मातापितृघटकस्य DOM मध्ये रेण्डर् कृत्वा संचारस्य विशेषविधिः प्राप्ता भवति ।

नमूना कोड：

<!-- 父组件 -->
<template>
  <div>
    <Teleport to="body">
      <ChildComponent />
    </Teleport>
  </div>
</template>
 
<!-- 子组件 -->
<template>
  <div>Some content</div>
</template>

रचना एपिआइ

रचना एपिआइ परिचय
Vue 3 इत्यनेन Composition API इत्यस्य परिचयः कृतः, यत् तर्कस्य व्यवस्थितीकरणस्य पुनः उपयोगस्य च नूतनं मार्गं प्रदाति ।उत्तीर्णःsetupकार्याणि विकासकान् घटकानां प्रतिक्रियाशीलस्थितिं जीवनचक्रं च अधिकलचीलतया नियन्त्रयितुं शक्नुवन्ति ।

अन्तर-घटकसञ्चारार्थं ref तथा reactive इत्येतयोः उपयोगं कुर्वन्तु
refतथाreactiveप्रतिक्रियाशीलदत्तांशनिर्माणार्थं Composition API इत्यस्मिन् एकं साधनम् अस्ति ।

• refमूलभूतदत्तांशप्रकारस्य निर्माणार्थं प्रतिक्रियाशीलसन्दर्भाः ।
• reactiveवस्तुप्रकारस्य निर्माणार्थं प्रतिक्रियाशीलसन्दर्भः ।

Composition API इत्यस्मिन् provide and inject इत्यस्य उपयोगेन
रचना एपिआइ इत्यत्र .provideतथाinjectअनुमतम्setupपार-घटकसञ्चारं प्राप्तुं कार्येषु उपयुज्यते ।

नमूना कोड：

// 祖先组件
import { provide } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('message', message);
  }
}
 
// 子孙组件
import { inject } from 'vue';
 
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Vue 3 इत्यस्य एतेषां अद्वितीयसञ्चारपद्धतीनां माध्यमेन विकासकाः घटकानां मध्ये संचारं अधिकलचीलतया व्यवस्थितुं शक्नुवन्ति तथा च कोडस्य परिपालनक्षमतायां पुनः उपयोगे च सुधारं कर्तुं शक्नुवन्ति

सारांशं कुरुत

Vue 3 इत्यनेन Composition API इत्यस्य परिचयः कृतः, यत् घटकसञ्चारस्य कृते नूतनानि लचीलतां, शक्तिशालिनः विशेषताः च आनयति । घटकसञ्चारः अग्र-अन्त-विकासे जटिल-उपयोक्तृ-अन्तरफलकानां निर्माणस्य कुञ्जी अस्ति अस्मिन् मातापितृ-बाल-घटकयोः, भ्रातृ-घटकयोः, पूर्वज-वंशज-घटकयोः च मध्ये आँकडा-स्थानांतरणं तथा घटना-प्रवर्तनं च अन्तर्भवति Vue 3 इत्यत्र पारम्परिकाः प्रोप्स् तथा इमिट् इत्यादीनि विविधानि संचारविधयः प्रदाति, तथैव नूतनं Provide/Inject, Teleport तथा ​​Composition API च ।

अनुशंसित सम्बन्धी सूचना

• Vue 3 आधिकारिक दस्तावेजीकरण： Vue.js - प्रगतिशील जावास्क्रिप्ट ढांचा | Vue.js- आधिकारिकदस्तावेजीकरणं Vue 3 शिक्षणार्थं सर्वाधिकं आधिकारिकं संसाधनं भवति, यत्र विस्तृतमार्गदर्शिकाः एपिआइ-सन्दर्भाः च सन्ति ।
• Vue.js 3 रचना एपिआइ ट्यूटोरियल： रचना एपिआइ FAQ | Vue.js- शीघ्रं आरम्भं कर्तुं सहायतार्थं आधिकारिकं रचना एपिआइ पाठ्यक्रमम्।
• पिनिया आधिकारिक दस्तावेजीकरण： पिनिया | Vue.js कृते सहजज्ञानयुक्तः भण्डारः- यदि भवान् राज्यप्रबन्धनार्थं पिनिया इत्यस्य उपयोगं कर्तुं योजनां करोति तर्हि पिनिया इत्यस्य आधिकारिकदस्तावेजीकरणं सर्वोत्तमः शिक्षणसंसाधनः अस्ति ।
• Vue.js प्रौद्योगिकी प्रकटिता：भूमिका |.Vue.js प्रौद्योगिकी प्रकट- एषा परियोजना Vue.js इत्यस्य आन्तरिकतन्त्रस्य गहनविश्लेषणं करोति, यत् Vue कथं कार्यं करोति इति अवगन्तुं साहाय्यं करोति ।

सृष्टिः सुलभा नास्ति।