मुझे vue.js में एक घटक बनाम निर्देश का उपयोग कब करना चाहिए? मैं बूटस्ट्रैप से कुछ सामान लागू कर रहा हूं और ऐसा लगता है कि मैं इसे किसी भी तरह से कर सकता हूं (मैं ड्रॉपडाउन मेनू से शुरू कर रहा हूं)।vue.js निर्देश बनाम घटक के लिए मामलों का उपयोग करें?
मुझे यह महसूस हो रहा है कि एक ही तत्व पर डोम में हेरफेर करने के लिए निर्देश अधिक है, जबकि घटक डेटा और/या डोम हेरफेर का एक गुच्छा पैकेजिंग के लिए हैं। क्या यह देखने का एक अच्छा तरीका है?
यह स्टैक ओवरफ़्लो प्रश्न Google क्वेरी "vue निर्देश बनाम घटक" के # 1 परिणाम है। सौरशाज का जवाब वर्तमान में स्वीकार किया गया है और यह वू 2.0 में बहुत गलत है। मुझे कल्पना है कि यह बहुत से लोगों को भटक रहा है इसलिए मैं यहां वजन करने जा रहा हूं।
जवाब देने के लिए "मैं एक निर्देश या Vue में एक घटक का उपयोग करना चाहिए" लगभग हमेशा एक घटक है।
क्या आप पुन: प्रयोज्य HTML चाहते हैं? अर्थात। पुन: प्रयोज्य विजेट्स? फिर एक घटक का प्रयोग करें। क्या आप इन दो विगेट्स में अलग डेटा चाहते हैं? फिर एक घटक का प्रयोग करें। एक का डेटा नहीं दूसरे के डेटा को ओवरराइड करेगा। शायद यह वू 1.0 में सच था, मुझे नहीं पता। लेकिन यह वू 2.0 में बिल्कुल सही नहीं है। वू 2.0 में, आपके घटकों में data फ़ंक्शन है जो डेटा का एक अद्वितीय सेट देता है। एक Vue लटकती यूआई बूटस्ट्रैप लटकती के लिए इसी तरह एक HTML मार्कअप है की इस वास्तविक जीवन पर विचार करें:
<template>
<span class="dropdown sm-dropdown" @click="toggle" :class="{'open': isOpen}">
<a class="dropdown-toggle">
<span class="special-field">{{ label }}</span>
</a>
<ul class="dropdown-menu">
<li v-for="choice in choices">
<a @click.prevent="click(choice)">{{ choice.label }}</a>
</li>
</ul>
</span>
</template>
<script>
export default {
name: 'Dropdown',
props: ['label', 'options', 'onChange'],
data() {
return {
choices: this.options,
isOpen: false
}
},
methods: {
click(option) {
this.onChange(option);
},
toggle() {
this.isOpen = !this.isOpen;
}
}
}
</script>
, मैं कुछ इस तरह कर सकते हैं:
<template>
<div class="container">
<dropdown
:label="-- Select --"
:options="ratingChoices"
:onChange="toggleChoice"
>
</dropdown>
<dropdown
:label="-- Select --"
:options="ratingChoices"
:onChange="toggleChoice"
>
</dropdown>
</div>
</template>
<script>
import Dropdown from '../dropdown/dropdown.component.vue';
export default {
name: 'main-directive',
components: { Dropdown },
methods: {
toggleChoice(newChoice) {
// Save this state to a store, e.g. Vuex
}
},
computed: {
ratingChoices() {
return [{
value: true,
label: 'Yes'
}, {
value: false,
label: 'No'
}]
}
}
}
</script>
वहाँ एक है यहां कोड की सभ्य राशि। क्या हो रहा है कि हम एक मूल घटक स्थापित कर रहे हैं और उस मूल घटक के अंदर हमारे पास दो ड्रॉपडाउन हैं। दूसरे शब्दों में, ड्रॉपडाउन घटक को दो बार बुलाया जा रहा है। जिस बिंदु को मैं इस कोड को दिखाने में कोशिश कर रहा हूं वह यह है: जब आप ड्रॉपडाउन पर क्लिक करते हैं, तो उस dropdown के लिए isOpen उस निर्देश के लिए और केवल उस निर्देश के लिए परिवर्तन करता है। ड्रॉपडाउन में से किसी एक पर क्लिक करने से किसी अन्य तरीके से अन्य ड्रॉपडाउन प्रभावित नहीं होता है।
चाहे आप अलग डेटा चाहते हैं या नहीं, इस पर आधारित घटक या निर्देशों के बीच चयन न करें। घटक अलग डेटा के लिए अनुमति देते हैं।
तो आप कब वू में निर्देश चुनना चाहते हैं?
यहां कुछ दिशानिर्देश दिए गए हैं जो उम्मीद करेंगे कि आप सही दिशा में सोचेंगे।
v-for निर्देश लें। यह आपको एक संग्रह के माध्यम से लूप करने की अनुमति देता है। यह बहुत उपयोगी है और आपको किसी भी घटक में ऐसा करने में सक्षम होना चाहिए, और आप नहीं चाहते कि डोम को कोई गहराई मिल जाए। यह एक अच्छा उदाहरण है जब निर्देश बेहतर विकल्प है। [1]@click निर्देशों का लाभ उठा सकूं जो घटकों में उपलब्ध है।अधिक उत्सुक के लिए एक फुटनोट। सिद्धांत में v-for एक घटक के रूप में बनाया जा सकता था, लेकिन ऐसा करने पर आपको हर बार v-for का उपयोग करना और एक और अजीब वाक्यविन्यास का उपयोग करना आवश्यक था। Vue बजाय इस बात का इससे बाहर एक घटक बनाने के लिए चुना था, तो:
<a v-for="link in links" :href="link.href">link.anchor</a>
वाक्य रचना पड़ता था इस किया गया है:
<v-for items="link in links">
<a :href="link.href">link.anchor</a>
</v-for>
इतना ही नहीं अनाड़ी है, लेकिन घटक के बाद से आंतरिक HTML प्राप्त करने के लिए <slot></slot> वाक्यविन्यास को लागू करने के लिए कोड की आवश्यकता होगी, और चूंकि स्लॉट <template> घोषणा के तत्काल बच्चे नहीं हो सकते हैं (क्योंकि इस बात की कोई गारंटी नहीं है कि स्लॉट मार्कअप में शीर्ष स्तर पर प्रवेश का एक नोड है), इसका मतलब हैके लिए घटक परिभाषा में आसपास के शीर्ष-स्तर तत्व होना चाहिए। इसलिए डीओएम आवश्यक से गहरा हो जाएगा। निर्देश स्पष्ट रूप से सही विकल्प था।
Reusability, निर्देशों का उपयोग कर के लिए एक कारण है
जबकि अवयव भी पुन: प्रयोज्य 'widgets', एक ही एचटीएमएल प्रणाली पिछले अभियानों 'डेटा' को अधिलेखित कर देगा में दो घटक बना रहे हैं, तो तरह के मामले में निर्देशों के बारे में सोच इस।
सोचने के लिए एक और बिंदु यह है - क्या उपयोगकर्ता कुछ निर्देशों के बाद ही HTML के माध्यम से इसका उपयोग कर सकता है?
मैं इसके बारे में लगता है कि इस तरह से:
अवयव विजेट निर्धारित - इन एचटीएमएल के वर्गों उनसे जुड़े व्यवहार होती है।
निर्देश एचटीएमएल के वर्गों का व्यवहार संशोधित करते हैं (जो विजेट हो सकते हैं या नहीं भी हो सकते हैं)।