Vue: बच्चों को माता-पिता के लिए पंजीकृत घटकों को "विरासत" करने दें।

कोई वास्तविक दुनिया उपयोग का मामला?

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

हां। मेरे एप्लिकेशन में एक पॉपअप विंडो है जिसमें कस्टम संपादक तत्वों की जटिल संरचना है। इन तत्वों को 3-4 स्तरों के पदानुक्रम में जोड़ा जा सकता है, जिससे प्रत्येक मूल तत्व के लिए उन्हें स्पष्ट रूप से घोषित करना अक्षम हो जाता है (3-5 मूल प्रकार * 10 घोषित तत्व = दोहराए जाने वाले कोड की 50 पंक्तियाँ)। और, उन्हें विश्व स्तर पर पंजीकृत करना भी अच्छा नहीं है क्योंकि वे एप्लिकेशन के अन्य भागों में कभी नहीं दिखाई देंगे। तो मैं उन्हें "स्थानीय रूप से" लोड करना पसंद करूंगा।

उन्हें स्पष्ट रूप से आयात करना एक सार्थक दोहराव है। यह आपको अकेले उस पदानुक्रम में किसी भी घटक को देखने और यह समझने की अनुमति देता है कि इसकी निर्भरताएँ कहाँ से आती हैं। अंतर्निहित फ़ॉलबैक के साथ, आपको याद नहीं रहेगा कि आपने 3 महीने बाद पदानुक्रम में उन घटकों को कहाँ आयात किया था।

@yyx990803 मेरी याददाश्त अच्छी है, धन्यवाद। तो मुझे याद होगा कि मेरे ऐप में दो बहुत अलग टुकड़े हैं, उनमें से प्रत्येक इसके लिए विशिष्ट घटकों के एक अच्छी तरह से परिभाषित सेट को पंजीकृत कर रहा है। इसलिए मैं अपनी संपत्तियों को लोड करने का विकल्प चुनना पसंद करूंगा (और मुझे संदेह है कि कस्टम निर्देशों और फ़िल्टर के साथ भी ऐसा ही हुआ था)।

मुझे अपना प्रभाव साझा करने दें। मैंने 0.12.x के साथ काम किया और यह बहुत अच्छी तरह से चला गया (कुछ मामूली सीखने की अवस्था वाली चीजें)। न्यूनतम और स्वच्छ एपीआई, वाक्य रचना, विश्वसनीय कोड। अब, हम 1.0.0-बीटा पर हैं और यह बदतर हो गया, बेहतर नहीं। अधिक कोड दोहराव, मेरे द्वारा उपयोग की जाने वाली सुविधाएँ मुझे एक ही कोड को बार-बार फिर से लिखने के लिए हटा देती हैं। मुझे लगता है कि मैंने रिएक्ट पर Vue चुनने में गलती की है, क्योंकि मुझे यकीन नहीं है कि भविष्य में मेरे समय की बर्बादी और कोई और बदलाव नहीं होगा।

@ कारेवन

1. यह बहुत अधिक उपयोगी होगा यदि आप वास्तव में उन विशिष्ट चीजों को सूचीबद्ध करते हैं जिन्होंने इस मुद्दे के अलावा देव अनुभव को और भी खराब कर दिया है।
2. 1.0.0-अल्फा पूर्व-रिलीज़ हैं, जिसका अर्थ है कि पहले स्थान पर कोई एपीआई स्थिरता गारंटी नहीं थी। यदि आप स्थिरता को महत्व देते हैं, तो आपको 0.12 पर टिके रहना चाहिए और स्थिर 1.0 की प्रतीक्षा करनी चाहिए (जिसमें अंतिम माइग्रेशन रिलीज़ भी होगी)। पूर्व-रिलीज़ का उपयोग करने का अर्थ है कि आप लगातार टूटने वाले परिवर्तनों से निपटने के लिए सहमत हैं।
3. 1.0.0-बीटा भी जारी नहीं किया गया है। गैर-रिलीज़, कार्य-प्रगति वाली शाखा का उपयोग करना शायद एक अच्छा विचार नहीं है।
4. मैं अपने अनुभव और पूरे समुदाय के फीडबैक के आधार पर एपीआई डिजाइन कर रहा हूं। आप जो कुछ भी सोचते हैं, उसके आप हकदार हैं, और यदि परिवर्तन उस दिशा में नहीं हैं जो आपको पसंद है, तो आप बेझिझक अन्य रूपरेखाओं पर स्विच कर सकते हैं। (वास्तव में, रिएक्ट में आपको सब कुछ स्पष्ट रूप से आयात करना होगा, और और भी सामान दोहराना होगा।)

1. चर्चा #1170 पढ़ने के बाद अब मैं लगभग सहमत हूँ। लेकिन .. मुझे वास्तव में मौजूदा कोड को हटाने में कोई बिंदु नहीं दिख रहा है जो इस सुविधा को केवल strict: true को डिफ़ॉल्ट बनाने के बजाय प्रदान करता है। स्वाद अलग है, और कुछ लोग "फॉलबैक" दृष्टिकोण रखना पसंद करेंगे, जो कभी-कभी अधिक सहज होता है। विशेष रूप से, जब घटकों को गतिशील रूप से लोड किया जाता है। इसे मिक्सिन्स, फैक्ट्रियों आदि के साथ काम किया जा सकता है, लेकिन इसमें कीमती समय लगता है।
2. ज़रूर। लेकिन "आदर्श वास्तुकला" और परिवर्तनों की लागत के बीच हमेशा संतुलन होता है। इस मामले में कोड की कुछ पंक्तियाँ (अर्थात्: लगभग 10) जो किसी को भी चोट नहीं पहुँचाएँगी यदि उन्हें छोड़ दिया जाए तो मुझे महत्वपूर्ण समय लग गया। और मुझे इस अस्थिर संस्करण का उपयोग करना होगा क्योंकि मुझे वास्तव में "रीड-राइट बाइंडिंग फिल्टर" सुविधा की आवश्यकता है, जिन्हें शायद 0.12.x पर बैकपोर्ट नहीं किया जाएगा।
3. 2 देखें।
4. सवाल यह नहीं है कि "मैं कौन सा एपीआई पसंद करता हूं"। मुझे Vue पसंद है। अवधि। सवाल यह है कि "अगर मैं लंबी अवधि में Vue API पर भरोसा कर सकता हूं"। सुंदरता पर विश्वसनीयता। यदि परिवर्तन टूट रहे हैं, तो उनके लिए गंभीर कारण होना चाहिए। नए बाध्यकारी वाक्यविन्यास के मामले में, जिसने मेरे सभी कोड को तोड़ दिया - ठीक है, इसे रहने दें, यह अधिक पठनीय है और बेहतर कोड संरचना को मजबूर करता है। इस मामले में - नहीं। डिफ़ॉल्ट रूप से सेट options.strict = true के साथ यह परिवर्तन गैर-ब्रेकिंग हो सकता है।

हां, अपग्रेड करना हमेशा रिफैक्टरिंग के दर्द के साथ आता है, लेकिन 1.0 ही Vue के लिए इन लीगेसी कॉन्फिग विकल्पों से मुक्त होने का एकमात्र मौका है। 1.0 के बाद यह सख्ती से सीवर हो जाएगा, और 2.0 तक कुछ भी नहीं टूटना चाहिए। और मैं चाहता हूं कि 1.x यथासंभव लंबे समय तक चले, क्योंकि आपने जिस विश्वसनीयता मुद्दे के बारे में बात की थी।

सख्त मोड के बारे में: जब आप इस पर बहुत अधिक भरोसा करते हैं तो निश्चित रूप से रिफैक्टरिंग समय खर्च होता है - लेकिन आदर्श रूप से नए उपयोगकर्ताओं के लिए जो 1.0 के बाद Vue उठाते हैं, उन्हें यह जानने की भी आवश्यकता नहीं है कि यह मौजूद है। एपीआई की सतह यथासंभव छोटी होनी चाहिए, और वैश्विक संरचना पैटर्न यथासंभव सुसंगत होना चाहिए। सख्त मोड को अक्षम करना संभव बनाना अनिवार्य रूप से Vue ऐप्स को संरचित करने की दो अलग-अलग शैलियों को प्रोत्साहित करता है - कल्पना करें कि लोग एक ऐप पर काम कर रहे हैं जो strict: true का उपयोग करता है, फिर किसी अन्य प्रोजेक्ट पर जा रहा है जो strict: false का उपयोग करता है ... यह बनाता है डेवलपर अनुभव का विखंडन, और मैं उस संभावना से छुटकारा पाना चाहता हूं, और 1.0 ऐसा करने का एकमात्र उचित स्थान है।

इस संक्रमण के बीच में फंसना आपके लिए एक तरह से दुर्भाग्यपूर्ण है, और मैं आपकी प्रतिक्रिया की सराहना करता हूं। लेकिन जो करना है वह करना ही होगा।

@ yyx990803 मैं एक ठोस उपयोग का मामला देख सकता हूं जिसके साथ मैं फंस गया हूं।

मैं क्या करने की कोशिश कर रहा हूँ

मैं एक विस्तार योग्य एप्लिकेशन बनाता हूं: विगेट्स के साथ विस्तार योग्य। एक विजेट एप्लिकेशन का एक डेवलपर परिभाषित टुकड़ा है जो इसे कुछ बिंदुओं पर विस्तारित करने के लिए वैश्विक एप्लिकेशन में प्लग करता है; यह एप्लिकेशन के स्टार्टअप पर गतिशील रूप से लोड होता है। एप्लिकेशन के प्रत्येक इंस्टेंस में विजेट्स के अलग-अलग सेट हो सकते हैं और एप्लिकेशन के 2 इंस्टेंस एक ही पेज पर लाइव हो सकते हैं।

लोड होने पर विजेट vuejs एप्लिकेशन में एक गतिशील रूप से निर्मित घटक जोड़ देगा।
विजेट में अन्य विजेट (बच्चे) हो सकते हैं, हम इस बात से अवगत नहीं हैं कि यह स्टार्टअप पर कैसा होगा क्योंकि एप्लिकेशन लोड होने के बाद उपयोगकर्ता द्वारा इस भाग का प्रबंधन किया जाता है। इसलिए विजेट्स को एक-दूसरे के बारे में जागरूक होने और अन्य विजेट्स को पंजीकृत करने की आवश्यकता है।

समस्या

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

var components = {

    appComponents: {
       template: "...",
       components: components
    },

    appComponents2: {
       template: "...",
       components: components
    },

    widgetComponents: {
       template: "...",
       components: components
    },

    widgetComponents2: {
       template: "...",
       components: components
    },

}

क्या ऐसा करते समय कोई प्रदर्शन बाधा है?

इसलिए मुझे लगता है कि "अर्ध वैश्विक" घटक का दायरा उपयोगी हो सकता है। यह घटक के एक बंद दायरे के साथ अनुप्रयोगों को बनाने में मदद कर सकता है जहां घटक रूट और बच्चों के घटकों से पहुंच योग्य होंगे। लेकिन अन्य vuejs जड़ों से नहीं। तुम क्या सोचते हो?

वैश्विक पंजीकरण पुनरावर्ती रूप से पंजीकृत नहीं होता है, यह केवल पंजीकृत करता है
घटक स्वयं और इसके अंदर नहीं components विकल्प। तो मुझे लगता है
कोई समस्या नहीं थी।

सोम, 22 अगस्त 2016 को 16:00 सौफिएन ग़ज़ल नोटिफिकेशन @github.com ने लिखा:

@yyx990803 https://github.com/yyx990803 मैं एक ठोस उपयोग का मामला देख सकता हूं
मैं एक तरह से फंस गया हूँ।

_मैं क्या करने की कोशिश कर रहा हूं_

मैं एक विस्तार योग्य एप्लिकेशन बनाता हूं: विगेट्स के साथ विस्तार योग्य। एक विजेट है a
एप्लिकेशन के डेवलपर परिभाषित टुकड़े, यह गतिशील रूप से लोड किया गया है
आवेदन की शुरुआत। आवेदन के प्रत्येक उदाहरण में हो सकता है
विगेट्स का अलग सेट।

लोड होने पर विजेट में गतिशील रूप से बनाया गया घटक जोड़ देगा
वीयूजेएस आवेदन।
विजेट में अन्य विजेट (बच्चे) हो सकते हैं, हमें इसकी जानकारी नहीं है कि यह कैसे होता है
स्टार्टअप पर होगा क्योंकि इस भाग को उपयोगकर्ता द्वारा प्रबंधित किया जाता है
आवेदन लोड हो गया है। इसलिए विगेट्स को एक दूसरे के प्रति जागरूक रहने की जरूरत है।

_समस्या_

मैं इन विजेट्स को विश्व स्तर पर पंजीकृत करने से बचना चाहता हूं।
चूंकि विजेट गतिशील रूप से लोड होते हैं, इसलिए मुझे सभी विजेट को पंजीकृत करने की आवश्यकता है
प्रत्येक विजेट जिसमें बच्चे हो सकते हैं। यह बहुत सारे पंजीकरण करता है
इस्तेमाल नहीं किया जा सकता है। देखो:

वर घटक = {

appComponents: {
   template: "...",
   components: components
},

appComponents2: {
   template: "...",
   components: components
},

}

_क्या ऐसा करते समय कोई प्रदर्शन बाधा है?_

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने इस थ्रेड की सदस्यता ली है।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/vuejs/vue/issues/1297#issuecomment -241339596, या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AFTLl6QDePtH93VOU2lgrC72Z0vKLsv-ks5qiVcXgaJpZM4F7M1v
.

@fnlctrl यह वैश्विक पंजीकरण के बारे में नहीं है।

समस्या यह है कि

• सभी Vue+घटक उदाहरणों के लिए वैश्विक पंजीकरण रजिस्टर।
• केवल वर्तमान घटक के लिए स्थानीय पंजीकरण रजिस्टर
• और रूट और बच्चों "सेमी ग्लोबल" के लिए पंजीकरण करने का कोई तरीका नहीं है: कुछ ऐसा जो वर्तमान वीयू इंस्टेंस के लिए पंजीकरण करने की अनुमति देता है (इस उदाहरण में जोड़े गए घटकों सहित)।

मेरी राय में समस्या यह है कि vue हालांकि स्थिर (वैश्विक) तरीके के लिए है, लेकिन यह पैक/वितरण योग्य (स्थानीय) तरीके से प्रतिबंधित है।

semi-global पंजीकरण वास्तव में पहले से ही संभव है क्योंकि Vue में प्रोटोटाइप विरासत है।
https://jsfiddle.net/fnlCtrl/32dt9e9g/

@fnlctrl
मुझे समझ में नहीं आ रहा है कि आप अपने द्वारा भेजी गई पहेली के साथ क्या दिखाना चाहते हैं (कृपया ध्यान दें कि आपके उदाहरण में त्रुटि है: Unknown custom element: <bar> - did you register the component correctly? )

मैं पर्याप्त रूप से स्पष्ट नहीं हूं, शायद आप समझ नहीं पाए कि मैं क्या समझाना चाहता हूं। चलो फिर से शुरु करते हैं:

मैं जो समझाना चाहता हूं वह यह है कि हम कर सकते हैं:

• Vue.component('name', {...}) के साथ ग्लोबली रजिस्टर घटक (यह सिंगल पेज ऐप के लिए एकदम सही है)
• घटक new Vue({ components: {...} }); में स्थानीय रूप से एक घटक पंजीकृत करें (यह स्थानीय पुन: प्रयोज्य के लिए निर्भरता वाले घटकों को शिप करने के लिए अच्छा है)

लेकिन हम माता-पिता से बच्चों को घटक उपलब्ध नहीं करा सकते हैं। वर्तमान vm उदाहरण और इस उदाहरण में लोड किए गए सभी घटकों के लिए विश्व स्तर पर घटकों को पंजीकृत करने जैसा कुछ, लेकिन अन्य vm उदाहरणों में लोड किए गए ऑम्पोनेंट्स के लिए नहीं। उदाहरण देखें: https://jsfiddle.net/p8wqafm1/2/

क्या तुम समझ रहे हो?

ओह, ऐसा लगता है कि मेरी बेला सही ढंग से सहेजी नहीं गई थी..
यह वही है जो मैं आपको दिखाना चाहता था ..
https://jsfiddle.net/fnlCtrl/32dt9e9g/1/

मैं अभी आपका उदाहरण पढ़ रहा हूं।

मैंने आपका उदाहरण यहां फोर्क किया है जो काम करने के लिए सही है, मुझे आशा है कि मैं आपको सही ढंग से समझ गया हूं:
आप फू के अंदर सीमित गतिशील घटकों को जोड़ना चाहते हैं।

@fnlctrl आपके उदाहरण के लिए धन्यवाद लेकिन ऐसा लगता है कि इसमें वह शामिल नहीं है जो मैं अभी तक हासिल करने की कोशिश कर रहा हूं।

आपके उदाहरण में विधि का उपयोग केवल Foo में घटक पंजीकृत करता है, लेकिन यह उन्हें Foo के बच्चों ( इस उदाहरण में Bar ) में उपलब्ध नहीं कराता है।

बेला देखें, मैं Baz को Foo $ में पंजीकृत करता हूं और मैं चाहता हूं कि यह Bar में उपलब्ध हो क्योंकि यह Foo से लोड किया गया है: https://jsfiddle .नेट/8y0Lmb01/3/

अपना उदाहरण फोर्क किया: https://jsfiddle.net/fnlCtrl/uvzaotaz/

मुद्दा यह है कि घटकों में एक स्पष्ट निर्भरता वृक्ष होना चाहिए, और एक दूसरे के आधार पर गतिशील घटक अपवाद नहीं होने चाहिए।

@fnlctrl आपके उदाहरण में Baz $ अब Foo में उपलब्ध नहीं है।

ऐसा करने के लिए मैं Vue.component('baz', {...} का उपयोग कर सकता था लेकिन समस्या यह है कि यह इस baz घटक के साथ अन्य vue उदाहरण को "प्रदूषित" करेगा।

या

मैं Baz दोनों Foo और Bar , और सभी फू बच्चों, और सभी बार बच्चों, और सभी फू ग्रैंड चिल्ड्रन, आदि में पंजीकृत कर सकता हूं ... लेकिन यह एक जोड़ता है बड़े/गतिशील ऐप के मामले में बहुत जटिलता

क्या तुमने देखा कि मेरा क्या मतलब है? मैं स्थानीय रूप से पंजीकरण कर सकता हूं, लेकिन हम मौजूदा घटकों _only_ के बच्चों, पोते-पोतियों,... के लिए घटकों को इनहेरिट नहीं कर सकते

हाँ मैं अब तुम्हारा बिंदु देखता हूँ। क्षमा करें कि मुझे पता नहीं था कि पंजीकरण
फू के तहत घटक इसे फू के दायरे में वैश्विक नहीं बनाता है, इसके विपरीत
व्यू.घटक। यह देखने के लिए स्रोत में देखेंगे कि क्यों।

सोम, 22 अगस्त 2016 को, 20:17 सौफिएन ग़ज़ल नोटिफिकेशन @github.com ने लिखा:

@fnlctrl https://github.com/fnlctrl आपके उदाहरण में बाज उपलब्ध नहीं है
फू में अब और।

ऐसा करने के लिए मैं उपयोग कर सकता था Vue.component('baz', {...} लेकिन समस्या यह है कि
यह इस baz घटक के साथ अन्य Vue उदाहरण को "प्रदूषित" करेगा।

या

मैं फू और बार, और सभी फू बच्चों में बाज को पंजीकृत कर सकता था, और
सभी बार बच्चे, और सभी फू ग्रैंड चिल्ड्रन, आदि... लेकिन यह बहुत कुछ जोड़ता है
बड़े/गतिशील ऐप के मामले में जटिलता

क्या तुमने देखा कि मेरा क्या मतलब है? मैं स्थानीय रूप से पंजीकरण कर सकता हूं, लेकिन हमें विरासत में नहीं मिल सकता
वर्तमान घटकों के बच्चों, पोते-पोतियों,... के लिए घटक
_केवल_

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119, या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
.

धन्यवाद :)

मुद्दा यह है कि मैं एक स्टैंडअलोन लाइब्रेरी को शिप करना चाहता हूं जो वीयू पर निर्भर करता है, किसी दिए गए इंस्टेंस के लिए घटकों को पंजीकृत करना एक वास्तविक लाभ होगा, क्योंकि वैसे भी, एक स्टैंडअलोन लाइब्रेरी के रूप में, मुझे इसे वैश्विक वीयू इंस्टेंस में पंजीकृत करने की अनुमति नहीं है ( जो स्टैंडअलोन भाग को तोड़ देगा)।

कृपया, मुझे बताएं कि क्या मैं जिस बारे में बात कर रहा था उसे Vue . में लागू किया जा सकता है

खैर, मुझे लगता है कि इसका कारण इतना स्पष्ट था कि मैं इसे नज़रअंदाज़ कर देता था: मैं नहीं था
new Foo() का उपयोग कर ...

मेरे घर की सवारी पर, 20 मिनट में एक बेला मिलेगा।

सोम, 22 अगस्त 2016 को 20:27 宋铄运[email protected] ने लिखा:

हाँ मैं अब तुम्हारा बिंदु देखता हूँ। क्षमा करें कि मुझे पता नहीं था कि पंजीकरण
फू के तहत घटक इसे फू के दायरे में वैश्विक नहीं बनाता है, इसके विपरीत
व्यू.घटक। यह देखने के लिए स्रोत में देखेंगे कि क्यों।

सोम, अगस्त 22, 2016, 20:17 पर
लिखा था:

@fnlctrl https://github.com/fnlctrl आप उदाहरण में बाज नहीं है
फू में अब उपलब्ध है।

ऐसा करने के लिए मैं उपयोग कर सकता था Vue.component('baz', {...} लेकिन समस्या यह है कि
यह इस baz घटक के साथ अन्य Vue उदाहरण को "प्रदूषित" करेगा।

या

मैं फू और बार, और सभी फू बच्चों में बाज को पंजीकृत कर सकता था, और
सभी बार बच्चे, और सभी फू ग्रैंड चिल्ड्रन, आदि... लेकिन यह बहुत कुछ जोड़ता है
बड़े/गतिशील ऐप के मामले में जटिलता

क्या तुमने देखा कि मेरा क्या मतलब है? मैं स्थानीय रूप से पंजीकरण कर सकता हूं, लेकिन हमें विरासत में नहीं मिल सकता
वर्तमान घटकों के बच्चों, पोते-पोतियों,... के लिए घटक
_केवल_

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/vuejs/vue/issues/1297#issuecomment -241395119, या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AFTLl2ud0GDO_hOwFN8GIA1TzVEF1q0Fks5qiZM9gaJpZM4F7M1v
.

खैर, new Foo(...) ने भी काम नहीं किया: https://jsfiddle.net/8y0Lmb01/5/

वाकई अजीब है... https://jsfiddle.net/fnlCtrl/p0ggkncu/
अब इसमें देख रहे हैं।

मैंने कुछ स्रोत कोड पढ़े हैं, और पाया कि Vue पर ही, हम इस तरह हैक कर सकते हैं:
https://jsfiddle.net/fnlCtrl/522aw9sm/
(Vue.extend या Vue.component का उपयोग किए बिना, btw Vue.component केवल एक सहायक कार्य है जो Vue.extend करता है और Vue.options.components को संशोधित करता है)

हालांकि एक ही दृष्टिकोण एक विस्तारित Vue पर काम नहीं करता है:
https://jsfiddle.net/fnlCtrl/v1m2s16u/

तो मुझे लगता है कि समस्या घटक संकल्प के कारण होती है। मैं देखता रहूँगा।

@fnlctrl ठीक है धन्यवाद, मैंने कुछ चीजों की जांच करने की कोशिश की और आपके जैसे ही निष्कर्ष पर आया। मैं यह जानने के लिए पर्याप्त कोर नहीं जानता कि यह इस तरह क्यों काम करता है। क्या हम जानते हैं कि क्या यह अपेक्षित व्यवहार है?

मुझे लगता है कि ये टिप्पणियां resolveAsset . के बारे में हैं

एक संपत्ति का समाधान करें।
इस फ़ंक्शन का उपयोग इसलिए किया जाता है क्योंकि चाइल्ड इंस्टेंस को एक्सेस की आवश्यकता होती है
अपनी पूर्वज श्रृंखला में परिभाषित संपत्तियों के लिए।

सुझाव देता है कि विस्तारित Vue पर घटकों को पंजीकृत करना काम करना चाहिए।

फ़ंक्शन बॉडी में कोड पूर्वजों की श्रृंखला को नहीं देखता है, है ना? शायद इसे अभी तक लागू नहीं किया गया था?

मैं अभी तक पर्याप्त नहीं जानता, अभी भी इसके व्यवहार को सीख रहा हूं, लेकिन मुझे लगता है कि "पूर्वज श्रृंखला" पहले पैरामीटर options को संदर्भित करती है।

मुझे लगता है कि मैं यह निष्कर्ष निकाल सकता हूं कि इसका कारण यह है (src/core/global-api/extend) ।
यह विस्तारित कक्षाओं को अपने माता-पिता की समान पद्धति का उपयोग करता है।

मैंने इसका परीक्षण किया है, यदि आप कोर/वैश्विक-एपीआई/परिसंपत्तियों में क्या कॉपी करते हैं (निश्चित रूप से अलग-अलग प्रकार के छीन लिए गए डिस्ट संस्करण के अंदर संबंधित कोड का उपयोग करें)
vue.extend पर, इसे इस तरह दिखने के लिए ( Vue से Sub बदलें):

config._assetTypes.forEach(function (type) {
        Sub[type] = function (id, definition) {
          if (!definition) {
            return this.options[type + 's'][id];
          } else {
            /* istanbul ignore if */
            if ("development" !== 'production') {
              if (type === 'component' && config.isReservedTag(id)) {
                warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id);
              }
            }
            if (type === 'component' && isPlainObject(definition)) {
              definition.name = definition.name || id;
              definition = Sub.extend(definition);
            }
            if (type === 'directive' && typeof definition === 'function') {
              definition = { bind: definition, update: definition };
            }
            this.options[type + 's'][id] = definition;
            return definition;
          }
        };
      });

Foo = Vue.extend() और Foo.component() काम करेंगे।

हालांकि मुझे लगता है कि इससे कुछ प्रदर्शन जुर्माना होगा।

@gsouf और मुझे लगता है कि मुझे पहेली का आखिरी टुकड़ा मिल गया है (vue को संशोधित किए बिना समकक्ष कामकाज):
https://jsfiddle.net/fnlCtrl/v1m2s16u/

var Root = Vue.extend()

Root.options.components.Foo = Root.extend({
    template: '<div>Foo</div>'
})

Root.options.components.Bar = Root.extend({
    template: '<div>Bar, uses <foo></foo></div>'
})

new Root({
    template: `
  <div>
    <foo></foo>
    <bar></bar>
  </div>
  `
}).$mount('#app')

हाय @fnlctrl , आउटपुट के लिए धन्यवाद और देरी के लिए खेद है।

वास्तव में ऐसा लगता है कि कॉम्पोनेंट्स उनके कंस्ट्रक्टर से घटकों को विरासत में लेते हैं, न कि माता-पिता से। वर्तमान में देख रहा हूं कि क्या मैं अपने उपयोग के मामले में पैच लगा सकता हूं।

आपके मामले में यह एक कंस्ट्रक्टर से जुड़ा रहता है, उदाहरण के लिए नहीं, मैं इसे केवल इंस्टेंस का हिस्सा बनने की तलाश में हूं

जावास्क्रिप्ट के काम करने के तरीके के कारण @fnlctrl और आपके उदाहरण के लिए धन्यवाद, मैं अपने द्वारा बनाए गए प्रत्येक उदाहरण के लिए "गतिशील रूप से विस्तार" करके इसे हल कर सकता हूं, जिससे केवल इस एप्लिकेशन के लिए सब कुछ उपलब्ध हो सके।

createVueInstance = function(el, data){
    var vExtend = Vue.extend();
    vExtend.partial('some-semiglobal-partial', "...");
    vExtend.component('some-semiglobal-component', vExtend.extend({...}));

    return new vExtend({
        el: el,
        data: data
    });
};

यह जांचने के बाद कि कोर कैसे बनाया गया था, ऐसा नहीं लगता कि इसे प्रति उदाहरण उपलब्ध घटकों के आसान एकीकरण की अनुमति देने के लिए बनाया गया था और यह समाधान मेरे लिए पर्याप्त स्थिर है।

आपकी सहायताके लिए धन्यवाद!

बीटीडब्ल्यू, मुझे लगता है कि आपने मुझे जो उदाहरण दिखाया है उसे दस्तावेज़ में गहराई से समझाया जा सकता है। मुझे इसके बारे में कोई उल्लेख नहीं मिला

@gsouf आपका स्वागत है। मुझे लगता है कि यह मुद्दा उन लोगों के लिए पर्याप्त है जो एक समान सुविधा लागू करना चाहते हैं: मुस्कान:

यहां मेरे पास 'अर्ध-वैश्विक' उपयोग का मामला है:

मेरे पास अपेक्षाकृत सार्वभौमिक लेआउट घटक है, लेकिन सामग्री उन घटकों द्वारा कॉन्फ़िगर करने योग्य है जो लेआउट घटक का उपयोग करते हैं, उदाहरण के लिए। घटक ए लेआउट का उपयोग करता है और घटक बी के साथ अपनी सामग्री को कॉन्फ़िगर करना चाहता है, कुछ अन्य घटक लेआउट का उपयोग कर सकते हैं और घटक सी के साथ इसकी सामग्री को कॉन्फ़िगर कर सकते हैं, आदि।

क्या इस पैटर्न का समर्थन किया जाना चाहिए?

या क्या इस डिज़ाइन को बदलने का कोई समाधान है?

कोड के पुन: उपयोग को बेहतर बनाने के लिए iOS में पैटर्न का व्यापक रूप से उपयोग किया जाता है और यह एक लचीला डिज़ाइन है।

@hpsoar शायद आपको जो चाहिए वह है स्लॉट

मेरा डिज़ाइन इस प्रकार है, मूल रूप से यह मुझे सेल के साथ दो काम करने की अनुमति देगा:

1. एक सीएसएस शैली के साथ सेल को सरल कॉन्फ़िगर करें, जो कई मामलों के लिए पर्याप्त होगा;
2. सेल में एक घटक डालें, जिसका उपयोग विशेष मामलों के लिए किया जाएगा।

<template>
  <div class="tile is-ancestor">
    <div class="tile is-parent">
      <article class="tile is-child box">
        <div class="table-responsive">
          <table class="table is-bordered is-striped is-narrow">
            <thead>
            <tr>
              <th v-for="c in columns">
                {{c.title}}
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in items">
              <template v-for="c in columns">
                <td v-if="c.hasOwnProperty('component')"><div :is="c.component"></div></td>
                <td v-else>{{ item[c.name] }}</td>
              </template>
            </tr>
            </tbody>
          </table>
        </div>
      </article>
    </div>
  </div>
</template>

<script>

export default {
  components: {
  },
  props: [
    'columns',
    'items'
  ],
  data: function () {
    return {
    }
  }
}

</script>

<style lang="scss" rel="stylesheet/scss">
  .table-responsive {
    display: block;
    width: 100%;
    min-height: .01%;
    overflow-x: auto;
  }
</style>