Vue: बशर्ते प्रॉपर कार्यात्मक घटकों में इंजेक्ट नहीं किए जाते हैं

ऐसा इसलिए है क्योंकि parent , child को vm (शायद एक मुद्दा) के बच्चे माना जाता है। तो आपको provide vm लिखने की आवश्यकता हो सकती है।

BTW, आपकी फेल्ट [email protected] iddle का उपयोग कर

इंजेक्शन प्रदान करने के लिए लुकअप एल्गोरिथ्म बच्चे को प्रदान की गई विशेषताओं के लिए खुद को देखता है और फिर इसे जड़ तक प्रॉप्स की तलाश में $parent पदानुक्रम देता है।
https://github.com/vuejs/vue/blob/b182ac40697edbe8253d4bd68b6ac09e93259e1c/src/core/instance/inject/js#L59 -L59

चलाने के लिए आपकी फिडेल नहीं मिल सकी, लेकिन जब मैंने https://jsfiddle.net/Austio/vhgztp59/7/ पर भाग लिया, तो यह फिडल $ माता-पिता बाल घटक पर अपरिभाषित था जब मैं लुकअप के संदर्भ में मिला। कम से कम यह एक शुरुआत है अगर यह स्लॉट्स में रेंडर करने और घटकों के बीच संबंध नहीं होने के साथ कोई समस्या नहीं है।

यह लगता है कि स्लॉट्स हल होने से पहले कार्यात्मक घटक प्रदान किया गया है

@Kingwl सही है, और यह एक तकनीकी आवश्यकता की तरह है।

मुझे याद है कि मैंने इस मुद्दे को उठाया क्योंकि मैं इसके बारे में पागल हो रहा था। अंत में, यह मेरे लिए सामान्य लग रहा था क्योंकि कार्यात्मक घटक उन घटकों से जुड़े होते हैं जिन्हें वे प्रदान करते हैं और इसलिए जब एक स्लॉट में उपयोग किया जाता है, तो वे बाहरी घटक से जुड़ जाते हैं। हालांकि, गैर-कार्यात्मक घटकों के साथ ऐसा नहीं है:

कंटेनर mode: 'foo' इंजेक्ट करता है और <div><slot/></div>

<!-- rendered in App -->
<container>
   <!-- parent is App, mode is undefined -->
  <functional></functional>
</container>

<container>
   <!-- parent is container, mode is foo -->
  <not-functional></not-functional>
</container>

http://jsfiddle.net/p861bj9y/

संपादित करें: @alidcastano मैंने आपकी टिप्पणी में

फेल में गलत Vue संस्करण का उपयोग करने के लिए खेद है, मैं JSX को कॉन्फ़िगर करने में सक्षम नहीं होने पर भी पकड़ा गया था जिसका मुझे एहसास नहीं था। @posva मेरे उदाहरण को ठीक करने के लिए धन्यवाद!

-

तो यहां मुद्दा यह नहीं है कि कार्यात्मक घटक प्रदान किए गए गुणों को प्राप्त नहीं कर सकता है, यह है कि स्लॉट से पहले कार्यात्मक घटक प्रदान किया गया है?

@LinusBorg "तकनीकी आवश्यकता" से इसका मतलब यह है कि कोई समाधान नहीं है या व्यवहार का इरादा है?

क्या कंटेनर को vm रूप में सेवा करने के लिए बनाया जाना चाहिए जो प्रॉपर से गुजरता है? उदाहरण के लिए, डिजाइन इस में बदल जाएगा:

// before
<parent-component>
  <child-component />
</parent-component>

// after
<vm-container>
   <parent-component>
     <child-component />
   </parent-component>
<vm-container>

लेकिन उपरोक्त उदाहरण अनावश्यक रूप से फूला हुआ लगता है क्योंकि मूल घटक का सार पहले से ही बच्चे को प्रदान करने के लिए आवश्यक सभी डेटा को फंसा देता है। लेकिन मैं चर्चा के लिए खुला हूं; क्या आप लोग सुझाव देते हैं?

vm-container कुछ भी नहीं बदलेगा क्योंकि स्लॉट को app संदर्भ में प्रदान किया गया है

"तकनीकी आवश्यकता" से इसका मतलब यह है कि कोई समाधान नहीं है या व्यवहार का इरादा है?

व्यवहार कार्यात्मक घटकों के काम करने का एक परिणाम है। घटकों के इस सेट पर विचार करें:

<!-- template of a `parent` component -->
<template>
  <Child>
    <functional />
  </Child>
</template>

जब आप एक कार्यात्मक घटक को किसी अन्य घटक के स्लॉट में पास करते हैं, तो उसे प्रस्तुत करना होगा कि वह बच्चे को दिया गया है, ताकि बच्चे के घटक को स्लॉट सामग्री के रूप में परिणामी vNodes प्राप्त हो सके। (*)

ऊपर मेरे उदाहरण के संदर्भ में, इसका मतलब है कि इस समय कि <functional> घटक प्रदान करता है, उपलब्ध माता-पिता बाहरी घटक ( <parent> ) हैं, न कि <child> ।

नतीजतन, कार्यात्मक घटक के लिए उपलब्ध एकमात्र इंजेक्शन वे हैं जो <parent> में भी उपलब्ध हैं।

(*): यही कारण है कि वर्चुअलाइजेशन के वर्तमान कार्यान्वयन कैसे कार्यात्मक घटकों के साथ काम करता है। बदलने के लिए काफी आंतरिक मैकेनिकों के लिए काफी बदलाव की आवश्यकता होगी।

@posva @LinusBorg इसे समझ गया, समझाने के लिए धन्यवाद।

तो इन आवश्यकताओं के कारण, कार्यात्मक घटकों के साथ प्रदान / इंजेक्शन का उपयोग करने का एकमात्र तरीका app संदर्भ में प्रदान की गई प्रॉप्स है।

मुझे यकीन है कि इस बाधा को प्रलेखन में स्पष्ट किया जाएगा। कृपया आगे बढ़ें और इस मुद्दे को बंद करें अगर कुछ और नहीं है जिसे करने या स्पष्ट करने की आवश्यकता है; एक बार फिर धन्यवाद!

हो सकता है कि हम स्लॉट में कार्यात्मक घटक को बेहतर बनाने का एक तरीका खोज सकें
लेकिन फिलहाल, इसे @posva की तरह किया जाना चाहिए और @LinusBorg ने कहा

@Kingwl इसे खुला रखने के लिए धन्यवाद।

मैं अंत में उपरोक्त सलाह का उपयोग करके अपने vue-mobiledoc-editor प्लगइन में इसे शामिल करने का प्रयास करने का कुछ समय था। एक समस्या जो मुझे समझ में आती है अगर घटक को app उदाहरण से उपयोग करने की आवश्यकता है, तो यह है कि उपयोग किए गए नेस्टेड घटकों के साथ लचीलेपन की अनुमति देना अधिक कठिन है।

उदाहरण के लिए, मुझे पहले से पंजीकृत ऐप के तहत आने वाले घटकों को निर्यात करना होगा:

...

export default Vue.extend({
  render (h) {
    return (
      <div>
        <ParentComp>
          <ChildFuncComp/>
        </ParentComp>
      </div>
    )
  },

  provide () { // data that needs to be injected into functional components 
    return {
       msg: 'hello'
    }
  },

  components: {
    ParentComp,
    ChildFuncComp
  }
})

फिर मेरी समझ से, जब उपयोगकर्ता प्लगइन का उपयोग कर रहा है, तो यह ऐसा होगा:

// template
<div id="app">
   <div id="#someWhereInApp" />
</div>

// script 
import SuperCoolComponent from 'SuperCoolComponent' 

export default {
   mounted () {
    this.$once('mounted', () => new SuperCoolComponent().$mount('#someWhereInApp'))
    this.$emit('mounted')
  }
}

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

मैं प्रदान / इंजेक्शन का समर्थन करने के बजाय पूर्ण घटकों का उपयोग करूंगा

मैं इसे हल करने की कोशिश कर रहा हूँ
शायद यह एक लंबी प्रक्रिया है

@Kingwl आप इसे हल करने में सक्षम थे?

क्या इस मुद्दे को v3 में संबोधित करने की योजना है?

उदाहरण के लिए, मैं एक वी-फॉर को रेंडर फंक्शन में अमूर्त करने की कोशिश कर रहा हूं, लेकिन मेरे चिल्ड फंक्शनल कंपोनेंट हो सकते हैं (इसलिए रेंडर फंक्शन में प्रवेश करते समय वे पहले ही रेंडर हो जाते हैं और मैं उन्हें क्लोन नहीं कर सकता)।

किसी भी अद्यतन?