Vue: [छोड़ा गया] RFC: दायरे वाले स्लॉट के उपयोग को सरल बनाएं

अछा लगता है। मैं एक स्लॉट नाम प्रदान करने के लिए तर्क का उपयोग करने के बारे में सोच रहा था, लेकिन यह एक ही घटक पर कई निर्देशों v दायरे का उपयोग करने की अनुमति देगा और इसलिए घटक को प्रदान की गई सामग्री का पुन: उपयोग करेगा। जो मुझे यकीन नहीं है कि यह उपयोगी है या यदि इससे समस्याएं हो सकती हैं

ओवररल, यह रेंडरलेस घटकों के एपीआई उपयोग में सुधार करेगा, जो समय के साथ अधिक उपयोग किए जा रहे हैं

अगर मैं सही ढंग से समझूं, तो v-scope केवल एक उपयोग के मामले में कार्य करता है। लिखने के बजाय:

<foo>
  <template slot-scope="{ item }">{{ item.id }}</template>
</foo>

हम लिख सकते हैं:

<foo v-scope="{ item }">{{ item.id }}</foo>

इस मामले में यह काफी कम शोर करता है लेकिन ऐसा लगता है कि यह एकमात्र मामला है। ऐसा लगता है कि एक नया निर्देश पेश करने के लिए किसी प्रकार का ओवरकिल (जो अन्य निर्देशों से काफी अलग काम करता है, यहां तक ​​​​कि v-for क्योंकि यह केवल घटकों पर काम करता है और नीचे <slot> तर्क पर निर्भर करता है)। एक और चिंता यह है कि जब मैं इस रेपो में v-scope खोज करता हूं, तो केवल दो घटनाएं एक टेम्पलेट सबट्री (https://github.com/vuejs/vue/issues/5269) के डेटा दायरे को कम करने के बारे में चर्चा कर रही हैं। #issuecomment-288912328, https://github.com/vuejs/vue/issues/6913), जैसे कि जावास्क्रिप्ट में with काम करता है।

मुझें यह पसंद है। मेरे लिए एक प्रश्न शेष होगा कि हम नामित स्लॉट्स से कैसे निपटना चाहते हैं। यदि हम नामित स्लॉट को उसी निर्देश का उपयोग करने की अनुमति देना चाहते हैं, तो हमें इसे <template> पर भी अनुमति देने की आवश्यकता होगी:

<comp v-scope="scope">
  {{ scope.msg }} <!-- default slot, inheriting from the scope from above -->
  <template slot="someName" v-scope="otherScope">
    <p>{{ otherScope }}</p>
    <div> whatever</div>
  </template>
</comp>

हम इस अवसर का उपयोग sot-scope को हटाने के लिए कर सकते हैं और इसे Vue 3 में हटा सकते हैं, इसे v-scope

मुझे लगता है कि हमें निश्चित रूप से एक ही चीज़ के लिए दो अलग-अलग अवधारणाओं ( v-scope निर्देश और slot-scope ) के साथ समाप्त नहीं होना चाहिए।

सिडेनोट: अब, इसे देखते हुए, लोगों को तत्वों के पदानुक्रम से आभास हो सकता है और
निर्देश, कि वे नामित स्लॉट में otherScope और scope तक पहुंच सकते हैं। एक नकारात्मक पहलू हो सकता है।

नाम के लिए @LinusBorg , एक तर्क v-scope:slotName । मुझे लगता है कि केवल घटकों पर इसे अनुमति देने की बात यह है कि @Justineo ने जो कहा है उसे बदलना है (https://github.com/vuejs/vue/issues/9180#issuecomment-446168296)

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

यह काम करता है, है ना? 🤔 मुझे पूरा यकीन है कि मैंने स्लॉट स्कोप को नेस्टेड कर लिया है

यह काम करता है, है ना? 🤔 मुझे पूरा यकीन है कि मैंने स्लॉट स्कोप को नेस्टेड कर लिया है

मैंने उन्हें घोंसला नहीं बनाया, हालांकि, वे सहोदर स्लॉट हैं। मैंने घटक पर v-scope साथ डिफ़ॉल्ट स्लॉट के दायरे को परिभाषित किया है, और नामित स्लॉट (जो एक भाई स्लॉट है) <template slot="someName">
देखो? यह भ्रामक है ^^

@LinusBorg मुझे लगता है कि उपयोग भ्रमित करने वाला होगा। मुझे लगता है कि वैचारिक रूप से यह है:

• जब घटक पर सीधे v-scope का उपयोग किया जाता है, तो इसका मतलब है कि आप केवल डिफ़ॉल्ट स्लॉट का उपयोग कर रहे हैं।
• यदि आप नामित स्लॉट का उपयोग करना चाहते हैं... आपको अभी भी slot + slot-scope का उपयोग करने की आवश्यकता है।

मैं सहमत हूं कि v-scope और slot-scope का होना असंगत/भ्रमित करने वाला हो सकता है, विशेष रूप से नए उपयोगकर्ताओं के लिए जो इस बात से अवगत नहीं हैं कि हम वर्तमान डिजाइन पर कैसे पहुंचे।

समस्या को तोड़ना

संश्लेषित करने का प्रयास करते हुए, ऐसा लगता है कि हम एक समाधान चाहते हैं जो:

• स्कोप्ड स्लॉट्स से डेटा एक्सेस करने के लिए आवश्यक बॉयलरप्लेट को कम करें
• यह कहने से बचें कि डिफ़ॉल्ट स्लॉट के लिए डेटा नामित स्लॉट में उपलब्ध है
• हमारे द्वारा पेश किए जाने वाले नए एपीआई की संख्या को कम करें
• एपीआई को फिर से न लगाएं जहां वेब घटकों की कल्पना में पहले से ही एक स्वीकार्य समाधान है
• डेटा कहां से आया, इस बारे में भ्रम से बचने के लिए स्पष्ट रहें

मेरे पास एक समाधान हो सकता है जो इन सभी को संबोधित करता है! 🤞 $event लिए v-on , हमारे पास एक नामित तर्क के साथ एक निहित फ़ंक्शन के अंदर अभिव्यक्ति प्रदान करने की एक मिसाल है। ऐसा लगता है कि लोग उस सुविधा का आनंद ले रहे हैं और मुझे इसके कारण बहुत अधिक भ्रम नहीं दिख रहा है, इसलिए शायद हमें स्कोप्ड स्लॉट्स के लिए उस उदाहरण का अनुसरण करना चाहिए।

प्रस्तावित समाधान

v-scope का उपयोग करने के बजाय, हम स्लॉट स्कोप को $slot रूप में उपलब्ध करा सकते हैं। उदाहरण के लिए:

<TodoList :todos="todos">
  {{ $slot.todo.text }}

  <template slot="metaBar">
    You have {{ $slot.totals.incomplete }} todos left.
  </template>
</TodoList>

संदर्भ के लिए, चाइल्ड टेम्प्लेट इस तरह दिख सकता है:

<ul>
  <li v-for="todo in todos">
    <slot :todo="todo" />
  </li>
</ul>

<div>
  <slot name="metaBar" v-bind="itemsStats" />
</div>

जब स्लॉट्स को नेस्ट किया जाता है, तो $slot ऑब्जेक्ट स्लॉट डेटा को मर्ज कर देगा, जिसमें सबसे भीतरी स्लॉट्स ओवरराइड प्राथमिकता लेंगे। उदाहरण के लिए, में:

<Outer>
  <Middle>
    <Inner>
      {{ $slot }}
    </Inner>
  </Middle>
</Outer>

विलय इस तरह दिख सकता है:

$slot = {
  ...outerSlotData,
  ...middleSlotData,
  ...innerSlotData
}

आप नामस्थान ओवरलैप को संभालने के तरीके के बारे में चिंतित/आश्चर्य कर सकते हैं और 99.9% मामलों में, मुझे नहीं लगता कि यह कोई मुद्दा होगा। उदाहरण के लिए:

<UserData id="chrisvfritz">
  My email is {{ $slot.user.email }}, but you can reach Sarah at
  <UserData id="sdras">
    {{ $slot.user.email }}
  </UserData>.
</UserData>

उपरोक्त उदाहरण में, नेस्टिंग स्कोप के बावजूद, $slot.user का हमेशा सही मान होगा। हालांकि, कभी-कभी आपको वास्तव में एक ही समय में दोनों संपत्तियों तक पहुंच की आवश्यकता होगी, जैसे कि:

<UserData id="chrisvfritz">
  <template slot-scope="me">
    <UserData id="sdras">
      <template slot-scope="sarah">
        <CollaborationPageLink :user-ids="[me.user.id, sarah.user.id]">
          View your collaboration history
        </CollaborationPageLink>
      </template>
    </UserData>
  </template>
</UserData>

इन दुर्लभ किनारे के मामलों के लिए, उपयोगकर्ता अभी भी slot-scope उपयोग अपने वर्तमान व्यवहार के साथ एस्केप हैच के रूप में कर सकते हैं । लेकिन v-scope अभी भी अनावश्यक होगा, क्योंकि अगर मैं सही ढंग से समझूं, तो इसका उद्देश्य सबसे आम उपयोग के मामलों को सरल बनाना होगा, जो कि $slot ऑब्जेक्ट पहले से ही समान समस्याओं के बिना पूरा कर चुका होगा।

लाभ

• जब कोई उपयोगकर्ता स्लॉट द्वारा प्रदान किए गए डेटा तक पहुंचना चाहता है, तो एकमात्र बॉयलरप्लेट $slot , जो स्पष्ट रहते हुए

• यह जानने के लिए कि वे किस डेटा तक पहुंच सकते हैं, उपयोगकर्ताओं को केवल इस बारे में सोचना होगा कि सामग्री किस स्लॉट (खातों) को प्रदान की जाएगी । मुझे लगता है कि v-scope , यह मानने वाले लोगों के साथ बहुत भ्रम होगा कि यह v-for जैसा काम करता है, क्योंकि यह एकमात्र अन्य निर्देश है जो स्कोप्ड संदर्भ गुणों को परिभाषित करता है।

• उपयोगकर्ताओं को स्कोप्ड स्लॉट का उपयोग करने के लिए विनाशकारी के साथ परिचित और सहज होने की आवश्यकता नहीं है , इस प्रकार सीखने की अवस्था कम हो जाती है।

• कुछ मामलों में, विशेष रूप से कई नेस्टेड स्लॉट के साथ जो सभी राज्य प्रदान करते हैं, यह स्पष्ट नहीं होगा कि कौन सा घटक कुछ राज्य से आया है और उपयोगकर्ताओं को फिर से slot-scope तक पहुंचना होगा। यह एक नुकसान की तरह लग सकता है, लेकिन जब मैं नेस्टेड स्कॉप्ड स्लॉट देखता हूं, तो यह लगभग हमेशा राज्य प्रदाता पैटर्न के लिए होता है, जो मुझे दृढ़ता से लगता है कि यह एक विरोधी पैटर्न है। यहाँ मेरा तर्क है । तो तथ्य यह है कि कई नेस्टेड स्कॉप्ड स्लॉट्स को अधिक बॉयलरप्लेट की आवश्यकता होगी, वास्तव में एंटी-पैटर्न के उपयोग को कम कर सकता है ।

• एपीआई सतह क्षेत्र काफी कम हो गया है , क्योंकि अधिकांश Vue डेवलपर्स को केवल $slot याद रखना होगा, जो कि सिर्फ एक वस्तु है।

• एक $ -prefixed संपत्ति का उपयोग करके, हम वेब घटक स्लॉट API पर इस तरह से निर्माण कर रहे हैं जिससे यह स्पष्ट हो जाता है कि $slot एक Vue चीज़ है।

• वर्तमान में, पुस्तकालयों अक्सर की तरह कुछ करना <slot v-bind="user" /> , इसलिए उनके उपयोगकर्ताओं के साथ कुछ वर्ण को बचा सकता है कि slot-scope="user" के बजाय slot-scope="{ user } । यह पहली नज़र में सुरुचिपूर्ण लगता है, लेकिन मुझे एक विरोधी पैटर्न के रूप में अनुभव हुआ है। समस्या तब उत्पन्न होती है जब घटक उपयोगकर्ता के अलावा _अन्य डेटा को उजागर करना चाहता है। फिर उनके पास दो विकल्प होते हैं: अपने एपीआई में एक ब्रेकिंग परिवर्तन करें या इस नई संपत्ति को user ऑब्जेक्ट पर बाध्य करें, भले ही इसका उपयोगकर्ता के साथ बहुत कम संबंध हो। न तो एक बढ़िया विकल्प है। सौभाग्य से, $slot घटकों को कम भविष्य-सबूत बनाने के प्रलोभन को हटा देगा , क्योंकि जबकि $slot अभी भी $slot.user से छोटा है, आप उपयोगकर्ता को $slot रूप में अलियास करके महत्वपूर्ण संदर्भ खो देते हैं

नुकसान

• कुछ नेस्टेड स्कॉप्ड स्लॉट में, कुछ किनारे के मामले हैं जहां यह स्पष्ट नहीं होगा कि कुछ डेटा किस घटक से आया है। हालांकि इन मामलों में, उपयोगकर्ता अभी भी slot-scope तक पहुंच सकते हैं, जब उन्हें अधिकतम खोजकर्ता की आवश्यकता होती है, इसलिए मुझे नहीं लगता कि यह कोई बड़ी बात है। इसके अलावा, जैसा कि मैंने पहले उल्लेख किया है, मुझे लगता है कि यह बहुत संभावना है कि उपयोगकर्ता राज्य प्रदाता घटकों के साथ पैर में खुद को गोली मार रहा है यदि उन्हें पहली बार यह समस्या है।

मुझे लगता है कि एक $ -prefixed संपत्ति पूरे Vue उदाहरण के अंदर सुसंगत होनी चाहिए। मुझे यकीन नहीं है कि यह प्रत्येक स्लॉट में $slot को निहित रूप से इंजेक्ट करके भ्रम पैदा करेगा और वे वास्तव में इन स्लॉट स्कोप के अंदर एक स्थानीय तर्क के लिए खड़े हैं। यह एक तरह का सम्मेलन है (मेरे अवलोकन के अनुसार) कि $ -prefixed गुण प्रत्येक Vue उदाहरण के लिए उपलब्ध कुछ के लिए खड़े हैं, इसलिए उनका उपयोग कहीं भी किया जा सकता है, जिसमें जीवनचक्र हुक, विधियाँ और रेंडर फ़ंक्शन शामिल हैं। इस विशेष $slot को जोड़ने से यह परंपरा टूट जाएगी।

@chrisvfritz यह एक दिलचस्प प्रस्ताव है, लेकिन यह सामान्य स्लॉट्स और स्कोप्ड स्लॉट्स के एकीकृत होने पर निर्भर करता है (इसलिए शायद कुछ ऐसा जिसे v3 में माना जा सकता है)। इसके साथ सबसे बड़ी समस्या यह है कि क्या स्लॉट सामग्री चाइल्ड कंपोनेंट के $slots या $scopedSlots में उपलब्ध होनी चाहिए? एकमात्र संकेत $slot अभिव्यक्तियों में कहीं मौजूद है (पेड़ के नीचे कहीं भी हो सकता है), जो slot-scope (जो केवल स्लॉट रूट पर हो सकता है) जितना स्पष्ट नहीं है। यद्यपि तकनीकी रूप से हम संकलक में इसका पता लगा सकते हैं, उपयोगकर्ता के लिए स्लॉट $slots से $scopedSlots जब भी उपयोगकर्ता टेम्पलेट में $slot का उपयोग करना शुरू करेगा ...

क्या इसका JSX उपयोगकर्ताओं पर कोई बड़ा प्रभाव पड़ेगा?

@donnysim नहीं, यह किसी भी तरह से

मुझे लगता है कि एक $ -prefixed संपत्ति पूरे Vue उदाहरण के अंदर सुसंगत होनी चाहिए। मुझे यकीन नहीं है कि यह प्रत्येक स्लॉट में $slot को निहित रूप से इंजेक्ट करके भ्रम पैदा करेगा और वे वास्तव में इन स्लॉट स्कोप के अंदर एक स्थानीय तर्क के लिए खड़े हैं।

@Justineo मैंने पहले भी यही सोचा था, लेकिन हम इसे $event और कोई भी शिकायत नहीं करता है, इसलिए पहले से ही _is_ मिसाल है और हमारे पास सबूत हैं कि उपयोगकर्ता आमतौर पर भ्रमित नहीं होते हैं और वास्तव में सुविधा का आनंद लेते हैं।

इसके साथ सबसे बड़ी समस्या यह है कि क्या स्लॉट सामग्री चाइल्ड कंपोनेंट के $slots या $scopedSlots में उपलब्ध होनी चाहिए?

@yyx990803 बढ़िया सवाल! मेरे पास एक विचार है जो काम कर सकता है। क्या होगा यदि उन मामलों में जहां यह अस्पष्ट है ( $slot का उपयोग करके नेस्टेड स्लॉट), हम सभी स्लॉट को एक स्कोप्ड स्लॉट में संकलित करते हैं, लेकिन सभी $scopedSlots $slots को गेटर्स के रूप में

for (const slotName in vm.$scopedSlots) {
  // Don't override existing slots of the same name,
  // since that's _technically_ possible right now.
  if (vm.$slots[slotName]) continue

  Object.defineProperty(vm.$slots, slotName, {
    get: vm.$scopedSlots[slotName],
    enumerable: true,
    configurable: true,
    writable: true
  })
}

इस तरह, के मामले में:

<A>
  <B>
    {{ $slot.foo }}
  </B>
</A>

हम कुछ इस तरह संकलित कर सकते हैं:

// Assume new render helper:
// _r = mergeSlotData

_c('A', {
  scopedSlots: _u([
    {
      key: 'default',
      fn: function(_sd) {
        var $slot = _r($slot, _sd)
        return [
          _c('B', {
            scopedSlots: _u([
              {
                key: 'default',
                fn: function(_sd) {
                  var $slot = _r($slot, _sd)
                  return [_v(_s($slot.foo))]
                },
              },
            ]),
          }),
        ]
      },
    },
  ]),
}) 

और इससे कोई फर्क नहीं पड़ेगा कि foo <A> से आता है या <B> , क्योंकि उन घटकों के अंदर this.$slots.default और this.$scopedSlots.default(someData) काम करेंगे।

एक युगल चेतावनी:

• नेस्टेड स्लॉट वाले मामलों में और उनमें से केवल कुछ ही वास्तव में स्कोप हैं, $slot का उपयोग करके टेम्प्लेट से संकलित रेंडर फ़ंक्शन slot-scope का उपयोग करने की तुलना में थोड़ा बड़ा होगा। हालांकि बहुत महत्वपूर्ण नहीं है, इसलिए मुझे लगता है कि यह ठीक है।

• मैं एक वास्तविक उदाहरण के बारे में नहीं सोच सकता, लेकिन ऐसे किनारे के मामले हो सकते हैं जहां कोई उपयोगकर्ता $slots / $scopedSlots से अधिक पुनरावृत्ति कर रहा है और नए या डुप्लिकेट गुण होने से अप्रत्याशित व्यवहार हो सकता है। मैंने कुछ दिलचस्प पैटर्न को सक्षम करने से पहले गतिशील रूप से नामित $slots और $scopedSlots पर पुनरावृति की है, लेकिन यह परिवर्तन मेरे द्वारा चलाए गए किसी भी उपयोग के मामलों को प्रभावित नहीं करेगा।

विचार?

हम इसे $event और कोई भी शिकायत नहीं करता है

@chrisvfritz ओह, मैं $event चीज़ से चूक गया। हालांकि यह स्पष्ट रूप से सम्मेलन का अपवाद है (मुझे विश्वास है कि यह 😅 है), $event केवल एक बहुत ही सीमित दायरे में उपलब्ध है (केवल वी-बाइंड विशेषता अक्षर के अंदर और कोई घोंसला नहीं)।

और $scopedSlots को $slots पर प्रॉक्सी करने के लिए:

मेरा मानना ​​​​था कि स्लॉट और स्कोप्ड स्लॉट अलग-अलग अवधारणाएं हैं और Vue का उनके लिए अलग-अलग उपयोग है, जिसका अर्थ है कि मेरे पास एक ही नाम साझा करने वाला एक स्लॉट और एक स्कोप्ड स्लॉट दोनों हो सकते हैं, लेकिन विभिन्न उद्देश्यों की पूर्ति करते हैं। लेकिन बाद में मैंने पाया कि निर्दिष्ट स्कोप स्लॉट अनुपलब्ध होने पर Vue वास्तव में उसी नाम के स्लॉट में वापस आ जाता है। मेरे लिए इसका मतलब है कि हमें उन्हें एक ही चीज़ के रूप में मानना ​​चाहिए, लेकिन चूंकि हमारे पास प्रत्येक उदाहरण पर $slots और $scopedSlots उपलब्ध हैं, इसलिए हम हमेशा उन्हें अधिक लचीले/अप्रत्याशित तरीके से रेंडर फ़ंक्शंस में उपयोग कर सकते हैं। , जैसे सभी सूची आइटम को ओवरराइड करने के लिए डिफ़ॉल्ट स्लॉट का उपयोग करना और किसी एकल आइटम को ओवरराइड करने के लिए डिफ़ॉल्ट स्कोप्ड स्लॉट का उपयोग करना। यह वास्तव में प्रोत्साहित नहीं है (हमने अपने डॉक्स और स्टाइल गाइड AFAIK में इस पर अनुशंसित उपयोग का सुझाव नहीं दिया है) क्योंकि हम उन्हें 3.0 में स्लॉट की एकल अवधारणा में विलय करने की संभावना रखते हैं, लेकिन 2.x में ऐसा करने से टूट जाएगा काफी समय पहले से कुछ उपयोग की अनुमति है।

हम उन्हें 3.0 में स्लॉट की एकल अवधारणा में विलय करने की संभावना रखते हैं, लेकिन 2.x में ऐसा करने से काफी समय पहले से अनुमत कुछ उपयोग टूट जाएगा।

@ जस्टिनो मुझे गलतफहमी हो सकती है, लेकिन मैं उन्हें पहले से ही 2.x में विलय करने का सुझाव नहीं दे रहा हूं - केवल वर्तमान फ़ॉलबैक व्यवहार का विस्तार कर रहा हूं। आपके द्वारा वर्णित उपयोग मामला, जहां $slots और $scopedSlots समान नामस्थान का उपयोग करते हैं, तब भी संभव होगा क्योंकि slot-scope का व्यवहार अपरिवर्तित रहेगा। उदाहरण के लिए:

<div>
  Default slot
  <template slot-scope="foo">
    Default scoped slot {{ foo }}
  </template>
</div>

अभी भी ठीक वैसा ही काम करेगा। क्या इसका कोई मतलब है?

@chrisvfritz

मैं उन्हें 2.x में मर्ज करने की बात नहीं कर रहा था। मैं कह रहा था कि यदि आप ऐसा करते हैं:

गेटर्स के रूप में $slots तहत सभी $scopedSlots उपलब्ध कराएं

आप $slots.foo को $scopedSlots.foo से अलग नहीं कर सकते हैं और अब उन्हें रेंडर फ़ंक्शंस में अलग से उपयोग नहीं कर सकते हैं।

आप $slots.foo को $scopedSlots.foo से अलग नहीं कर सकते हैं और उन्हें अब रेंडर फ़ंक्शंस में अलग से उपयोग कर सकते हैं।

ईमानदारी से, मुझे खुशी होगी अगर सब कुछ (स्लॉट और स्कोप्ड स्लॉट) स्कोप्ड स्लॉट्स में फ़ंक्शन के रूप में पहुंच योग्य होगा, इसका मतलब यह है कि कोई और बेकार जांच नहीं है कि कौन सा स्लॉट प्रस्तुत करना है। यह वास्तव में एक घटक परिप्रेक्ष्य से कोई फर्क नहीं पड़ता कि डेवलपर किस प्रकार के स्लॉट का उपयोग करता है। मिश्रित JSX और टेम्प्लेट सिंटैक्स उपयोगकर्ता से आ रहा है।

@donnysim हां मैं https://github.com/vuejs/vue/issues/9180#issuecomment -447185512 में ऐसी चिंता क्यों है। यह पिछड़ी संगतता के बारे में है।

आप $slots.foo को $scopedSlots.foo से अलग नहीं कर सकते हैं और अब उन्हें रेंडर फ़ंक्शंस में अलग से उपयोग नहीं कर सकते हैं।

@Justineo आप वास्तव में _can_, हम इस पर कार्रवाई जब तक $slots पहले और पहले से ही परिभाषित स्लॉट की जगह नहीं है। मैंने ऊपर पोस्ट किया गया उदाहरण कार्यान्वयन देखें:

for (const slotName in vm.$scopedSlots) {
  // Don't override existing slots of the same name,
  // since that's _technically_ possible right now.
  if (vm.$slots[slotName]) continue

  Object.defineProperty(vm.$slots, slotName, {
    get: vm.$scopedSlots[slotName],
    enumerable: true,
    configurable: true,
    writable: true
  })
}

@chrisvfritz

निम्नलिखित उदाहरण पर विचार करें:

render (h) {
  if (!this.$slots.default) {
    return h(
      'div',
      this.items.map(item => this.$scopedSlots.default(item))
    )
  }
  return h('div', this.$slots.default)
}

यदि घटक उपयोगकर्ता केवल vm.$scopedSlots.default , तो उसे this.items माध्यम से लूप करना चाहिए और item s को स्कोप्ड स्लॉट में प्रस्तुत करना चाहिए। लेकिन अब जबकि vm.$scopedSlot.default अब स्कोप्ड स्लॉट है और यह मौजूद है, स्लॉट के बजाय स्कोप्ड स्लॉट को लागू किया जाएगा।

@ जस्टिनो मुझे लगता है कि यह उपयोग मामला बहुत दुर्लभ होगा, लेकिन पैटर्न बदलकर अभी भी संभव होगा:

if (!this.$slots.default) {

प्रति:

if (this.$scopedSlots.default) {

या, यदि उपयोगकर्ता कभी-कभी एक स्कोप्ड स्लॉट प्रदान करेगा जिसे किसी कारण से अनदेखा किया जाना चाहिए:

if (!Object.getOwnPropertyDescriptor(this.$slots, 'default').value) {

मैं अभी भी इसे एक ब्रेकिंग बदलाव नहीं मानूंगा। पहला, हमने कभी भी एक ही नाम के स्लॉट और स्कोप्ड स्लॉट के उपयोग का दस्तावेजीकरण/अनुशंसित नहीं किया है, इसलिए यह कभी भी सार्वजनिक अनुबंध का हिस्सा नहीं था। दूसरा, जैसा कि आपने उल्लेख किया है, टेम्प्लेट में स्कोप किए गए स्लॉट पहले से ही उसी नाम के गैर-स्कोप वाले स्लॉट में वापस आ जाते हैं, जो अच्छे ऐतिहासिक साक्ष्य के रूप में कार्य करता है कि हम कभी भी इस तरह से उपयोग की जाने वाली स्कोप्ड/गैर-स्कोप्ड सीमा के लिए नहीं थे।

क्या इसका कोई मतलब है? साथ ही, क्या आपने स्लॉट नामों के पुन: उपयोग के लिए कोई वास्तविक उपयोग के मामले देखे हैं? या आप किसी के बारे में सोच सकते हैं? मैं नहीं कर सकता, लेकिन अगर वहाँ _are_ उपयोगी और अद्वितीय पैटर्न सक्षम हैं, तो उनके बारे में अभी सीखना अच्छा होगा क्योंकि यह उन्हें Vue 3 में मर्ज करने के हमारे निर्णय को भी प्रभावित करेगा।

मुझे लगता है कि अलग-अलग उद्देश्यों के लिए एक ही नाम वाले स्कोप्ड स्लॉट और स्लॉट हैं
एक बुरा विचार। मैंने इसका इस्तेमाल Vue के पूर्व संस्करण में वादा किया था और इसे हटा दिया था
क्योंकि यह भ्रमित करने वाला था। और अब मुझे दोनों डिफ़ॉल्ट स्लॉट की जांच करनी है
और स्कोप्ड स्लॉट ताकि देव डेटा का उपभोग किए बिना एक स्लॉट प्रदान कर सके।
और अगर मुझे सही याद है, तो उपयोग करते समय आपके पास एक ही नाम नहीं हो सकता है
टेम्पलेट्स।

@chrisvfritz

मैं यह नहीं कह रहा था कि पैटर्न मददगार है और इसका समर्थन किया जाना चाहिए। यह वास्तव में भ्रम पैदा कर सकता है। मैं बस कह रहा था, मौजूदा कोड को तोड़ना संभव है। हमने कभी भी स्लॉट्स और स्कोप्ड स्लॉट्स के बीच समान नाम साझा करने का दस्तावेजीकरण नहीं किया है, लेकिन हमने कभी भी उपयोगकर्ताओं को ऐसा नहीं करने का सुझाव दिया है। और टेम्प्लेट में फ़ॉलबैक तर्क प्रलेखित नहीं हैं। यह जानबूझकर नहीं हो सकता है, लेकिन कम से कम मैं खुद मानता था कि यह एक वैध उपयोग है जब तक कि मैंने टेम्पलेट्स में फ़ॉलबैक तर्क नहीं सीखा ...

@posva अपना अनुभव साझा करने के लिए धन्यवाद!

@Justineo आपकी राय में, क्या आपको ऐसा लगता है कि इस एज केस से उपयोगकर्ताओं को बहुत अधिक दर्द होगा, या यह Vue 2.x में स्कोप्ड स्लॉट API को बेहतर बनाने की सुविधा के लिए स्वीकार्य है?

इसे "टोडो" में स्थानांतरित कर दिया गया था - क्या हमारे पास इस बात पर आम सहमति है कि क्या लागू किया जाए?

मैं पिछले एक हफ्ते से इस बारे में सोच रहा हूं। मुझे @chrisvfritz का $slot परिवर्तनीय प्रस्ताव पसंद है और मैं कार्यान्वयन अवरोधकों को बाहर निकालने की कोशिश कर रहा था। यहाँ मुझे लगता है कि संभव है:

• सभी स्लॉट फ़ंक्शन के रूप में संकलित किए जाते हैं (जैसे 3.0 में), इसलिए कोई और स्थिर स्लॉट नहीं है (इससे अधिक सटीक घटक अपडेट ट्रैकिंग होती है)
• $scopedSlots प्रत्येक स्लॉट को एक फ़ंक्शन के रूप में प्रदर्शित करेगा
• $slots संबंधित फ़ंक्शन को खाली ऑब्जेक्ट के साथ कॉल करने के परिणामस्वरूप प्रत्येक स्लॉट को उजागर करेगा।

तो निम्नलिखित समकक्ष होगा:

this.$slots.default
// would be the same as
this.$scopedSlots.default({} /* $slot */)

उपरोक्त आंतरिक परिवर्तनों के साथ, $slots और $scopedSlots अनिवार्य रूप से एकीकृत हैं लेकिन पीछे की ओर संगत होना चाहिए! इससे 3.0 तक आसान माइग्रेशन भी हो सकता है।

प्रस्तावित $slot चर का उपयोग करने वाले कुछ उपयोग नमूने:

<!-- list and item composition -->
<fancy-list>
  <fancy-item :item="$slot.item"/>
</fancy-list>

<!-- hypothetical data fetching component -->
<fetch :url="`/api/posts/${id}`">
  <div slot="success">{{ $slot.data }}</div>
  <div slot="error">{{ $slot.error }}</div>
  <div slot="pending">pending...</div>
</fetch>

मुझे नहीं लगता कि नेस्टेड स्कोप मर्ज करना एक अच्छा विचार है। मुझे लगता है कि नेस्टिंग शामिल होने पर स्पष्ट होना बेहतर है (यानी हमेशा slot-scope यदि आपके पास नेस्टेड स्कॉप्ड स्लॉट हैं):

<!-- nested usage -->
<foo>
  <bar slot-scope="foo">
    <baz slot-scope="bar">
      {{ foo }} {{ bar }} {{ $slot }}
    </baz>
  </bar>
</foo>

आपके पिछले उदाहरण में, $slot किस स्लॉट की बात कर रहा है?

@Akryum यह { ...foo, ...bar } ।

@Justineo @Akryum हम्म मैं बता सकते हैं इस भ्रमित किया जा सकता है ... हम बना slot-scope एक स्लॉट के मूल तत्व पर प्रयोग करने योग्य, यानी यहां foo द्वारा प्रदान स्लॉट गुंजाइश है <foo/> , bar <bar/> द्वारा प्रदान किया जाता है और $slot द्वारा प्रदान किया जाता है <baz/> ... अब मुझे लगता है कि इस तरह के उपयोग की अनुमति देना एक गलती थी, क्योंकि इस मामले में अधिक सहज उपयोग कुछ ऐसा होगा:

<!-- nested usage -->
<foo slot-scope="foo">
  <bar slot-scope="bar">
    <baz slot-scope="baz">
      {{ foo }} {{ bar }} {{ baz }}
    </baz>
  </bar>
</foo>

यह भ्रमित करने वाला हो सकता है

इस मामले में अधिक सहज उपयोग कुछ इस तरह होगा

बिल्कुल सहमत। इसके अलावा, हम विनाशकारी का उपयोग जारी रख सकते हैं।
उदाहरण के लिए:
```दृश्य

<FieldValidation field="login" slot-scope="{ value, setValue, error }">
  <LoginInput
    :value="value"
    :error="error"
    @input="setValue"
  />
</FieldValidation>

<FieldValidation field="password" slot-scope="{ value, setValue, error }">
  <PasswordInput
    :value="value"
    :error="error"
    @input="setValue"
  />
</FieldValidation>

7988a554 और 5d52262f . के माध्यम से बंद

सारांश:

• सभी स्लॉट में $slot चर का समर्थन करें। ( $slot की उपस्थिति के कारण स्लॉट को स्कोप्ड स्लॉट के रूप में संकलित किया जा सकता है)।

• सामान्य स्लॉट सहित सभी स्लॉट अब फ़ंक्शन के रूप में this.$scopedSlots जाते हैं। इसका मतलब है कि this.$slots.default मौजूद है, तो this.$scopedSlots.default() अपना मूल्य वापस कर देगा। यह रेंडर फ़ंक्शन उपयोगकर्ताओं को हमेशा this.$scopedSlot उपयोग करने की अनुमति देता है और अब इस बारे में चिंता नहीं करता है कि स्लॉट पास किया जा रहा है या नहीं। यह 3.0 के साथ भी संगत है जहां सभी स्लॉट फ़ंक्शन के रूप में सामने आते हैं (लेकिन इसके बजाय this.$slots )।

• slot-scope उपयोग में कोई बदलाव नहीं, नए निर्देश का कोई परिचय नहीं। हम सिंटैक्स में न्यूनतम परिवर्तन करना चाहते हैं और संभावित टूट-फूट को 3.0 पर छोड़ देना चाहते हैं।

@ yyx990803 क्या $slot सभी बाहरी स्लॉट स्कोप को मर्ज करता है, या केवल निकटतम स्लॉट को संदर्भित करता है?

@Justineo कोई विलय नहीं, बस निकटतम।

मेरे पास जिन ऐप्स तक पहुंच है, उनमें स्कोप्ड स्लॉट उपयोग को देखते हुए, ऐसा लगता है कि $slot शॉर्टहैंड वास्तव में नेस्टेड स्लॉट मर्जिंग व्यवहार के बिना केवल आधे से अधिक मामलों में उपयोग करने योग्य नहीं होगा। समस्या यह है कि मूल घटक आमतौर पर कच्चे HTML तत्वों के स्थान पर उपयोग किए जाते हैं, और इन घटकों के अक्सर अपने स्वयं के स्लॉट होते हैं। उदाहरण के लिए:

<MapMarkers :markers="cities">
  <BaseIcon name="map-marker">
    {{ $slot.marker.name }}
  </BaseIcon>
</MapMarkers>

ऊपर के उदाहरण में, <MapMarkers> घटक के लिए केवल एक ही स्कोप स्लॉट है। <BaseIcon> एक गैर-स्कोप्ड स्लॉट स्वीकार करता है, लेकिन क्योंकि यह एक स्लॉट को बिल्कुल स्वीकार करता है, $slot विलय व्यवहार के बिना अपरिभाषित या एक खाली वस्तु होगी, जिससे क्लंकियर के लिए एक रिफैक्टर मजबूर हो जाएगा:

<MapMarkers :markers="cities">
  <template slot-scope="{ marker }">
    <BaseIcon name="map-marker">
      {{ marker.name }}
    </BaseIcon>
  </template>
</MapMarkers>

तो यहाँ मेरी चिंताएँ हैं:

• कम से कम मेरे स्वयं के नमूने से, ऐसा प्रतीत होता है कि $slot के लाभ का _most_ खो सकता है यदि यह केवल सबसे आंतरिक स्लॉट को संदर्भित करता है। वास्तव में, यह अच्छे से ज्यादा नुकसान भी कर सकता है, क्योंकि लोगों के लिए सीखने के लिए और अधिक एपीआई है।

• UI लाइब्रेरी v-html साथ प्रॉप्स का अधिक उपयोग शुरू कर सकती है, जहां स्लॉट अधिक उपयुक्त होंगे, उपयोगकर्ता की शिकायतों के जवाब में $slot का उपयोग करने में सक्षम नहीं होने के बारे में।

• उपयोगकर्ता कुछ मामलों में आधार घटकों से परहेज करना शुरू कर सकते हैं, ताकि स्कोप्ड स्लॉट के उपयोग को अधिक सुरुचिपूर्ण रखा जा सके, जिससे कम रखरखाव योग्य कोड हो सके।

@ yyx990803 क्या आपकी मुख्य चिंता $slot विलय से है कि यह बताना मुश्किल होगा कि किस घटक स्लॉट डेटा से आया है? यदि ऐसा है, तो यह जानने में मदद मिल सकती है कि केवल उन मामलों में जहां मेरे पास उपयोग किए गए नेस्टेड स्कोप स्लॉट तक पहुंच है, राज्य प्रदाता घटकों के लिए थे, जैसा कि मैंने पहले उल्लेख किया है कि मुझे एक विरोधी पैटर्न मिला है। तो विशेष रूप से अच्छी तरह से नामित स्लॉट गुणों के साथ, मुझे लगता है कि वैध उपयोग के मामलों में वास्तविक अस्पष्टता के मामले बहुत दुर्लभ होंगे। और स्वचालित विलय व्यवहार के साथ, उपयोगकर्ता अपने लिए यह तय करने में सक्षम होंगे कि क्या उन्हें और अधिक खोजकर्ता की आवश्यकता है - और जब वे ऐसा करते हैं, तो यही slot-scope लिए मौजूद होगा।

हालांकि एक समझौते के रूप में, यहां एक संभावित विकल्प है: क्या होगा यदि नेस्टेड स्कोप स्लॉट्स को मर्ज करने के बजाय, हमारे पास $slot निकटतम स्लॉट को देखें _ जिसने एक स्कोप प्रदान किया हो? यह मेरी चिंताओं को दूर करते हुए सबसे अस्पष्टता वाले मामलों को समाप्त कर सकता है। विचार?

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

$slot निकटतम स्लॉट को संदर्भित करता है जो एक दायरा प्रदान करता है

मुझे नहीं लगता कि यह काम करेगा। यह एक ही समस्या की ओर जाता है: क्या हो रहा है यह सुनिश्चित करने के लिए आपको घटकों के कार्यान्वयन विवरण के बारे में जानना होगा। मैं कहूंगा कि यह विलय से भी अधिक निहित और संभावित रूप से भ्रमित करने वाला है।

दीर्घकालिक रूप से मुझे लगता है कि सबसे अच्छा समाधान slot-scope के शब्दार्थ को बदल रहा है ताकि यह उपनाम/विनाश का एक तरीका बन जाए $slot । तो आपका उदाहरण इस तरह दिखेगा:

<MapMarkers :markers="cities" slot-scope="{ marker }">
  <BaseIcon name="map-marker">
    {{ marker.name }}
  </BaseIcon>
</MapMarkers>

यह विलय की आवश्यकता को समाप्त करता है, यह स्पष्ट है कि कौन से चर किस प्रदाता से आते हैं, और अत्यधिक क्रिया नहीं है। (मुझे लगता है कि 3.0 में हम शायद यही करने जा रहे हैं)

अभी हम जिस अजीब स्थिति में हैं, वह यह है कि हमने गैर-टेम्पलेट्स पर slot-scope का उपयोग करने की अनुमति दी है, और अब यह हमें घटक पर ही इसका उपयोग करने से रोकता है।

3.0 में इसके शब्दार्थ को बदलने से भी बहुत भ्रम और प्रवासन दर्द हो सकता है।

हो सकता है कि हम एक नई संपत्ति, slot-alias पेश करके समय की समस्या को दूर कर सकते हैं, जो वास्तव में वही करता है - $slot को किसी और चीज़ पर अलियासिंग करना। slot-scope विपरीत, इसका उपयोग केवल घटक या टेम्पलेट स्लॉट कंटेनर पर ही किया जा सकता है (इसका मतलब यह है कि यह slot-scope साथ बिल्कुल वैसा ही काम करेगा जब <template> पर उपयोग किया जाता है) :

नेस्टेड डिफ़ॉल्ट स्लॉट:

<MapMarkers :markers="cities" slot-alias="{ marker }">
  <BaseIcon name="map-marker">
    {{ marker.name }}
  </BaseIcon>
</MapMarkers>

<foo slot-alias="foo">
  <bar slot-alias="bar">
    <baz slot-alias="baz">
      {{ foo }} {{ bar }} {{ baz }}
    </baz>
  </bar>
</foo>

नेस्टिंग के बिना नामित स्लॉट:

एकमात्र मामला जहां यह अनिवार्य रूप से वर्बोज़ बन जाता है, नेस्टिंग के साथ स्लॉट्स का नाम दिया जाता है:

<foo>
  <template slot="a" slot-alias="a">
     <bar slot-alias="b">
        {{ a }} {{ b }}
     </bar>
  </template>
</foo>

(यह वास्तव में slot-scope और slot-alias दोनों का उपयोग करके कम वर्बोज़ हो सकता है, लेकिन मुझे लगता है कि यह भ्रमित करने वाला हो सकता है। मैं slot-scope पूरी तरह से हटाने के पक्ष में हूं)

<foo>
   <bar slot="a" slot-scope="a" slot-scope="b">
      {{ a }} {{ b }}
   </bar>
</foo>

अंत में, हम इसे एक शॉर्टहैंड भी दे सकते हैं, () (क्योंकि JSX में रेंडर प्रॉप्स आमतौर पर एरो फंक्शन होते हैं जो () ):

<MapMarkers :markers="cities" ()="{ marker }">
  <BaseIcon name="map-marker">
    {{ marker.name }}
  </BaseIcon>
</MapMarkers>

<foo ()="foo">
  <bar ()="bar">
    <baz ()="baz">
      {{ foo }} {{ bar }} {{ baz }}
    </baz>
  </bar>
</foo>

उपरोक्त की तुलना समकक्ष JSX से करें:

<foo>
  {foo => (
    <bar>
      {bar => (
        <baz>
          {baz => `${foo} ${bar} ${baz}`}
        </baz>
      )}
    </bar>
  )}
</foo>

डिजाइन के बाद से बंद करना अब मूल रूप से प्रस्तावित की तुलना में बहुत अलग है। इसके बजाय नया धागा खोलना।