Vue: यूआई घटकों के लिए बेहतर एपीआई, विशेषताओं और घटनाओं को अग्रेषित करने के लिए बॉयलरप्लेट को कम करना

हम्म, मैं इसके बारे में नहीं जानता, लेकिन इस तरह के घटकों के लिए मुझे लगता है कि आप प्रॉप्स फैलाने के लिए JSX या createElement का उपयोग कर सकते हैं।

https://github.com/doximity/vue-genome

हमारे लिए यह बहुत अच्छा होगा। हम सभी इनपुट को स्टाइलिंग और ux उद्देश्यों के लिए एक लेबल में लपेटते हैं। मैं सहमत हूं कि हम इसके बजाय जेएसएक्स पर जा सकते हैं लेकिन सभी के लिए टेम्पलेट्स का पालन करना इतना आसान है।

@Austio , दुर्भाग्य से, यह टेम्पलेट्स के लिए भुगतान है ... प्रतीक्षा करें ... शायद हम spread प्रॉप्स को vue टेम्प्लेट में लाने का तरीका सोच सकते हैं?

मुझे यह सुविधा व्यक्तिगत रूप से पसंद है। लेकिन ऐसा लगता है कि वी-बाइंड व्यवहार की स्थिरता को तोड़ना प्रतीत होता है, जैसे कभी-कभी मुझे मूल तत्व के लिए class संपत्ति को बाध्य करने की आवश्यकता होती है।

तो गेटटर और सेटर के रूप में निर्देशों की एक जोड़ी का उपयोग कैसे करें:

घटक के अंदर, v-expose एंकर को परिभाषित करें:

<input v-expose="foo" />

इसका उपयोग करते समय:

<the-component v-define:foo="{propA: '', propB: ''}"></the-component>

<!-- or maybe use v-bind for it directly -->
<the-component :foo="{propA: '', propB: ''}"></the-component>

@jkzing , यह बहुत अच्छा लग रहा है, लेकिन फिर से, यह एक बुनियादी प्रसार की तरह दिखता है और संभावित समस्याओं के साथ आप @keyup.enter.prevent="myAction" को कैसे परिभाषित करेंगे?

आप केवल <the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component> नहीं कर सकते, इसका मतलब है कि आपको सभी संशोधक जैसे enter और prevent को रनटाइम में रखना होगा (जो कि vue-template-compiler का एक हिस्सा है) एटीएम)

@ निकमेसिंग

यह एक बुनियादी प्रसार की तरह दिखता है

हम जिस चीज के बारे में बात कर रहे हैं वह टेम्प्लेट यूजर्स के लिए स्प्रेड जैसा कुछ लाना है

<the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component>

@ एक वी-ऑन शॉर्टलैंड है, इसका मतलब prop (वी-बाइंड) नहीं है।

@jkzing , विवरण के लिंक में बहुत सारे v-on बाइंडिंग भी हैं

@nickmessing उम ... v-on बाइंडिंग का सवाल है , यह एक अन्य विषय IMO है, जैसे इवेंट बबलिंग। मैं

@jkzing , घटक में एक निश्चित तत्व के लिए सभी गुणों को "जाने" बनाने के लिए, v-expose afaik की पूरी अवधारणा थी

@nickmessing , मूल प्रस्ताव के बारे में निश्चित नहीं हो सकता, लेकिन मुझे नहीं लगता कि एक ईवेंट श्रोता को attribute रूप में माना जाना चाहिए।

@jkzing , शायद नहीं, लेकिन <my-awesome-text-input /> के सामान्य उदाहरण पर विचार करते हुए जहां आपके पास> 9000 अलग-अलग प्रॉप्स हो सकते हैं, आप बस उन सभी को <input /> तक पहुंचाना चाहते हैं जो आपके कस्टम घटक के अंदर एक टन के बिना है कोड का।

मैं व्यक्तिगत रूप से v-bind="$props" उपयोग करता हूं या आप उन प्रॉप्स को बाहर करने के लिए फ़िल्टर कर सकते हैं जिन्हें आप लागू नहीं करना चाहते हैं। इस तरह आप एक इनपुट पर एक साथ कई प्रॉप्स लगा सकते हैं। वास्तव में वी-एक्सपोज़ उपयोगी हो सकता है क्योंकि रैपर घटकों जैसे इनपुट के लिए आपको उन सभी एचटीएमएल प्रॉप्स को निर्दिष्ट करना होगा

तो यह
https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue#L9
बेंत को कम करके v-bind="$props" या v-bind="filteredProps" जहां फ़िल्टर्डप्रॉप्स कुछ गणना की गई संपत्ति हो सकती है

@cristijora हम v-bind="someProps" भी उपयोग कर रहे हैं। इस समाधान के साथ समस्या यह है कि अत्यधिक गुण HTML विशेषताओं के रूप में जोड़े जाएंगे। यह बहुत अच्छा होगा यदि v-bind= उन सभी गुणों को फ़िल्टर कर सकता है जो घटक द्वारा स्वीकार नहीं किए जाते हैं। गतिशील <component> हम नहीं जानते कि गणना की गई संपत्ति में कौन से प्रोप को फ़िल्टर करना है। हालांकि यह संभव है निकालने के लिए options.props और प्रयोग lodash._pick ।

क्या यह वास्तव में एक निर्देश के साथ संभव है?

@posva , मुझे नहीं लगता कि यह प्रति निर्देश के रूप में काम करेगा, लेकिन यह वू टेम्पलेट इंजन का एक हिस्सा हो सकता है जो आंतरिक रूप से फैलता है + कुछ घटना प्रचार

@posva उपयोगकर्ता द्वारा निर्मित निर्देश नहीं है, मुझे नहीं लगता, इसलिए मैं गलत भाषा का उपयोग कर रहा हूं। मेरा मतलब सिर्फ एक "विशेष विशेषता" है।

@chrisvfritz क्या आपके पास एपीआई पर कोई विचार है कि इसका उपयोग कैसे किया जाएगा (यह निर्दिष्ट करना कि क्या खुलासा करना है और बच्चे को कैसे जोड़ना है)

मैं इसे अवधारणा प्रदान/इंजेक्ट करने के लिए उपयोग में समान देख सकता था।

@Austio मैं शायद इस सवाल को समझ नहीं

हे क्रिस, इंजेक्शन प्रदान करने के समान उपयोग करने पर अतिरिक्त विचारों का मतलब है जहां आप घोषणा करते हैं कि माता-पिता में क्या एक्सपोज़ेबल होना चाहिए और फिर बच्चे में इसका उपयोग करना।

ओह समझा। मुझे यकीन नहीं है कि इसकी आवश्यकता है। जानकारी पहले से ही सहारा और स्लॉट के माध्यम से पारित की जा सकती है - और यहां तक ​​​​कि माता-पिता की निजी संपत्तियों को this.$parent साथ एक्सेस किया जा सकता है, हालांकि मुझे लगता है कि उस पैटर्न से बचना सबसे अच्छा है।

@Austio क्या कोई विशेष उपयोग मामला है जिसके बारे में आप सोच रहे हैं?

@chrisvfritz कार्यों को प्रस्तुत करने में यह कैसे काम करेगा?

मुझे लगता है कि शायद यह बेहतर होगा:

• रूट नोड के लिए विशेषताओं के ऑटो-विरासत को अक्षम करने का विकल्प प्रदान करें
• उन विशेषताओं को $attributes रूप में उजागर करें, उदाहरण के लिए (नामकरण tbd)
• आप जहां चाहें उन्हें जोड़ने के लिए वी-बाइंड का उपयोग करें, जैसा कि हमने पहले ही $props साथ दिखाया है:

v-bind="$attributes"

इसका JSX/रेंडर फ़ंक्शंस में व्यावहारिक रूप से समान काम करने का अतिरिक्त लाभ होगा

@LinusBorg मुझे आपके सोचने का तरीका पसंद है। 😄 आपका तरीका बहुत अधिक सहज है।

एक विचार के रूप में, मुझे लगता है कि इस एपीआई के साथ, Vue का अगला प्रमुख संस्करण विशेषता ऑटो-विरासत को पूरी तरह से हटा सकता है, ताकि क्रॉस-घटक संचार दोनों पक्षों पर स्पष्ट रह सके।

इस व्यवहार को कम करना या हटाना संभव होगा, हाँ।

यदि यह libs आदि में कई घटकों पर संभावित रूप से आवश्यक परिवर्तनों के लायक है, तो निर्णय लिया जाना चाहिए और समुदाय, विशेष रूप से UI संग्रह लेखकों के साथ चर्चा की जानी चाहिए।

संभावित स्थिति के बारे में: यह जानकारी पहले से ही कार्यात्मक घटकों में context.data.attributes माध्यम से उपलब्ध है, इसलिए यह सुविधा मूल रूप से घटकों को उदाहरण के लिए समान कार्यक्षमता प्रदान करेगी।

हाँ बिल्कुल। मेरे मन में मुख्य उद्देश्य यूआई घटक लेखकों (तृतीय पक्ष और आंतरिक दोनों) के लिए काम को आसान बनाना है। वर्तमान में ऐसे बहुत से मामले हैं जहां ऐसा कुछ आवश्यक है:

<input
  v-bind:id="id"
  v-bind:accept="accept"
  v-bind:alt="alt"
  v-bind:autocomplete="autocomplete"
  v-bind:autofocus="autofocus"
  v-bind:checked="checked"
  v-bind:dirname="dirname"
  v-bind:disabled="disabled"
  v-bind:form="form"
  v-bind:formaction="formaction"
  v-bind:formenctype="formenctype"
  v-bind:formmethod="formmethod"
  v-bind:formnovalidate="formnovalidate"
  v-bind:formtarget="formtarget"
  v-bind:list="list"
  v-bind:max="max"
  v-bind:maxlength="maxlength"
  v-bind:min="min"
  v-bind:multiple="multiple"
  v-bind:name="name"
  v-bind:pattern="pattern"
  v-bind:placeholder="placeholder"
  v-bind:readonly="readonly"
  v-bind:required="required"
  v-bind:src="src"
  v-bind:step="step"
  v-bind:type="type"
  v-bind:value="value"
  v-on:keydown="emitKeyDown"
  v-on:keypress="emitKeyPress"
  v-on:keyup="emitKeyUp"
  v-on:mouseenter="emitMouseEnter"
  v-on:mouseover="emitMouseOver"
  v-on:mousemove="emitMouseMove"
  v-on:mousedown="emitMouseDown"
  v-on:mouseup="emitMouseUp"
  v-on:click="emitClick"
  v-on:dblclick="emitDoubleClick"
  v-on:wheel="emitWheel"
  v-on:mouseleave="emitMouseLeave"
  v-on:mouseout="emitMouseOut"
  v-on:pointerlockchange="emitPointerLockChange"
  v-on:pointerlockerror="emitPointerLockError"
  v-on:blur="emitBlur"
  v-on:change="emitChange($event.target.value)"
  v-on:contextmenu="emitContextMenu"
  v-on:focus="emitFocus"
  v-on:input="emitInput($event.target.value)"
  v-on:invalid="emitInvalid"
  v-on:reset="emitReset"
  v-on:search="emitSearch"
  v-on:select="emitSelect"
  v-on:submit="emitSubmit"
>

एक नई $attributes संपत्ति इसे इस तक छोटा कर सकती है:

<input
  v-bind="$attributes"
  v-on:keydown="emitKeyDown"
  v-on:keypress="emitKeyPress"
  v-on:keyup="emitKeyUp"
  v-on:mouseenter="emitMouseEnter"
  v-on:mouseover="emitMouseOver"
  v-on:mousemove="emitMouseMove"
  v-on:mousedown="emitMouseDown"
  v-on:mouseup="emitMouseUp"
  v-on:click="emitClick"
  v-on:dblclick="emitDoubleClick"
  v-on:wheel="emitWheel"
  v-on:mouseleave="emitMouseLeave"
  v-on:mouseout="emitMouseOut"
  v-on:pointerlockchange="emitPointerLockChange"
  v-on:pointerlockerror="emitPointerLockError"
  v-on:blur="emitBlur"
  v-on:change="emitChange($event.target.value)"
  v-on:contextmenu="emitContextMenu"
  v-on:focus="emitFocus"
  v-on:input="emitInput($event.target.value)"
  v-on:invalid="emitInvalid"
  v-on:reset="emitReset"
  v-on:search="emitSearch"
  v-on:select="emitSelect"
  v-on:submit="emitSubmit"
>

हालांकि तब मुझे लगता है कि घटनाओं को उजागर करने का कोई तरीका होना अभी भी अच्छा होगा। हो सकता है कि एक खाली v-on निर्देश माता-पिता पर सभी ईवेंट श्रोताओं को इस तत्व पर अग्रेषित कर सके?

<input
  v-bind="$attributes"
  v-on
>

या अगर अंत में कई चिंताएँ हैं जिन्हें हम बंडल करना चाहते हैं, तो हम कुछ इस तरह वापस आ सकते हैं v-expose :

<input v-expose>

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

मुझे इस विषय पर देर हो चुकी है, लेकिन मेरे कुछ विचार भी हैं।

v-bind वर्तमान समाधान और नुकसान

सबसे पहले, मैं पहले से ही v-bind="propObject" सुविधा (इतनी शक्तिशाली) का उपयोग और प्यार करता हूं। उदाहरण के लिए, बूटस्ट्रैप-व्यू में एक आंतरिक लिंक घटक है जो हर जगह उपयोग किया जाता है (बटन, एनएवी, ड्रॉपडाउन सूचियां, आदि)। घटक पिवोट्स एक देशी एंकर बनाम राउटर लिंक आधारित href बनाम to और vm.$router की उपस्थिति बन जाते हैं, इसलिए सशर्त रूप से प्रत्येक को पास करने के लिए बहुत सारी संपत्तियां हैं इन घटकों के।

हमारा समाधान उन प्रॉप्स को एक मिक्सिन में रखना और एक गणना की गई वस्तु के साथ v-bind="linkProps" करना था। यह बहुत अच्छा काम करता है, लेकिन यह अभी भी बहुत अधिक ओवरहेड है जो उस मिश्रण को _सभी अन्य घटकों को लिंक घटक_ का उपयोग करके जोड़ रहा है।

v-expose v-bind का उपयोग करने की संभावनाएं

मुझे व्यक्तिगत रूप से v-expose की अवधारणा पसंद है, और शायद यह डिफ़ॉल्ट स्लॉट + नामित स्लॉट की तरह काम कर सकता है, और फिर नामित विशेषता स्लॉट तक पहुंचने के लिए संशोधक का उपयोग कर सकता है।

डिफ़ॉल्ट विशेषता _"स्लॉट"_ हमेशा घटक को विशेषताएँ पास करेगी (कोई परिवर्तन नहीं), जबकि अन्य नामित लक्ष्य घटक द्वारा निर्दिष्ट किए जा सकते हैं। शायद कुछ ऐसा:

<template>
  <my-component 
    <!-- Nothing new here -->
    v-bind="rootProps"
    <!-- This binds the `linkProps` object to the named attribute slot `link` -->
    v-bind.link="linkProps"
  />
</template>

MyComponent.vue :

<template>
  <div>
    <router-link v-expose="link" />
  </div>
</template>

घटना प्रॉक्सी

मेरे पास यहां जोड़ने के लिए बहुत कुछ नहीं है, सिवाय इसके कि .native एक अद्भुत शक्तिशाली संशोधक है। मेरे लिए बहुत सारी समस्याओं का समाधान किया। हालांकि यह Vue देवों के लिए काफी हद तक अज्ञात लगता है (मुझे UI lib मुद्दों की एक अच्छी मात्रा दिखाई देती है जो इस सुविधा के लिए देवों को उजागर करके हल हो जाती हैं)। मैंने साइट में और डॉक्स और खोज समर्थन जोड़ने के लिए वेबसाइट पर एक पीआर रखा और संभावित रूप से Google खोज के लिए अनुकूलित किया।

एक अन्य मुद्दे में एपीआई सतह के बारे में एक तर्क से आते हुए, मुझे दोहराना होगा कि मैं v-expose विचार का प्रशंसक नहीं हूं। यह एक और "चीजों के काम करने का तरीका" पेश करता है, और जेएसएक्स के लिए वहां कुछ विशेष लागू किए बिना काम नहीं करता है, आदि।

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

<my-input
  type="file"
  mode="dropdown"
>

<template>
  <div>
    <input v-bind="$attributes">
    <dropdown v-bind="{ ...$props, $attributes.type }"/>
  </div>
</template

आह, मैं देख रहा हूँ कि तुम अब क्या कह रहे हो। और मुझे यह पसंद है! क्या यह वर्तमान में उपलब्ध है? इसके बजाय vm.$attributes अतिरिक्त होगा?

आपकी टिप्पणियों को दोबारा पढ़ना। मैं अभी ट्रैक कर रहा हूँ

हाँ, $attributes अतिरिक्त होगा।

साथ ही, हमें मूल तत्व में विशेषताओं को लागू करने के वर्तमान डिफ़ॉल्ट व्यवहार को चालू करने के विकल्प की आवश्यकता होगी, जैसे:
```एचटीएमएल

यह तब Vue 3.0 में एक डिफ़ॉल्ट सेटिंग बन सकता है यदि हम ऐसा करने का निर्णय लेते हैं जिसके परिणामस्वरूप ब्रेकिंग परिवर्तन होता है।

@LinusBorg घटनाओं के पक्ष से निपटने के बारे में आपके क्या विचार हैं? उसी रणनीति का पालन करने के लिए, मुझे लगा कि हम एक $listeners संपत्ति भी जोड़ सकते हैं, जो इस तरह दिख सकती है:

{
  input: function () { /* ... */ },
  focus: function () { /* ... */ },
  // ...
}

तब शायद v-on v-bind जैसी किसी वस्तु को स्वीकार कर सकता है। तो हमारे पास होगा:

<input v-bind="$attributes" v-on="$listeners">

एक समस्या जो मुझे दिखाई देती है वह है input / change घटनाओं के साथ, क्योंकि v-model तत्वों के मुकाबले घटकों के लिए थोड़ा अलग तरीके से काम करता है। मैं यह भी नहीं जानता कि क्या हम दोनों $listeners और $nativeListeners । मुझे लगता है कि अगर $listeners उपलब्ध होते, तो .native संशोधक अप्रचलित हो सकता है।

साथ ही, applyComponentAttrsToRoot विकल्प के संबंध में, शायद exposeRootEl एक अच्छा नाम होगा, जो false सेट होने पर, स्वचालित रूप से लागू विशेषताओं और .native ईवेंट दोनों को अक्षम कर सकता है अग्रेषित करना?

Vue.config माध्यम से और साथ ही एक घटक के लिए पूरे एप्लिकेशन के लिए इसे अक्षम करने में सक्षम होना भी अच्छा हो सकता है।

मुझे हाल ही में $listeners बारे में एक समान विचार आया था - यह कार्यात्मक घटकों पर भी उपलब्ध है

context.data.listeners

तो हम $props , $attributes , $listeners साथ समाप्त करेंगे जो मेरे लिए ठीक लगता है।

#5578 भी v-on="{...}" ऑब्जेक्ट सिंटैक्स के लिए पूछ रहा है जैसे मैंने $attributes लिए उपयोग किया था, यह ठीक से फिट होगा।

लेकिन मैं .native संशोधक के बारे में अनिश्चित हूं। घटक घटनाओं और देशी श्रोताओं दोनों के साथ इस काम को करने के लिए, एपीआई बहुत अधिक जटिल हो जाएगा, और उपयोग संदिग्ध है, क्योंकि मूल तत्व पर लागू एक मूल घटना श्रोता अभी भी वांछित घटना को बुदबुदाते हुए पकड़ लेगा, इसलिए यह mnot हो सकता है इसे टेम्पलेट में किसी विशिष्ट तत्व को असाइन करने के लिए आवश्यक हो।

आम तौर पर, मैं निम्न-स्तरीय घटक libs के लिए कहूंगा, जब टेम्पलेट्स के साथ काम करने के लिए अजीब हो रहा है तो कार्यों को प्रस्तुत करना पसंद किया जाना चाहिए। लेकिन मैं मानता हूं कि निम्नलिखित मूल्यवान होंगे:

1. "ऑटो लागू बाइंडिंग जो मूल तत्व के गुणों के रूप में प्रोप में नहीं पाए जाते हैं" के डिफ़ॉल्ट व्यवहार को अक्षम करना (संबंधित समस्या: क्या यह class और style बाइंडिंग को भी प्रभावित करना चाहिए?)

2. एक आंतरिक तत्व पर घटक पर बाहरी बाइंडिंग को "विरासत" करने का एक आसान तरीका उजागर करना जो जरूरी नहीं कि जड़ हो। आदर्श रूप से टेम्प्लेट और रेंडर फ़ंक्शंस के बीच संगतता के साथ।

ia kie like vue, सरल उपकरण

बस इतना कहना चाहता हूं कि v2.4 में इसके लिए पीआर बेहतरीन है! मैं

विज्ञप्ति से नोट

इनका संयोजन हमें इस तरह के एक घटक को सरल बनाने की अनुमति देता है:

<div>
  <input v-bind="$attrs" v-on="$listeners">
</div>

अच्छा लगता है लेकिन यह बिल्कुल सच नहीं है, क्योंकि इस तरह के घटकों को वी-मॉडल के साथ काम करने के लिए डिज़ाइन किया गया है और जहां तक ​​​​मुझे पता है कि रैपिंग घटक पर वी-मॉडल बॉक्स से काम नहीं कर रहा है। उदाहरण के लिए इनपुट पर रैपिंग घटक से वी-मॉडल को अग्रेषित करने का कोई उदाहरण है?
मुझे मिला सबसे आसान तरीका:
https://jsfiddle.net/60xdxh0h/2/

शायद टेम्पलेट के साथ काम करने वाले कार्यात्मक घटक के साथ यह अधिक सरल होगा

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

आप ऐसा क्यों सोचेंगे? वी-मॉडल एक प्रोप और एक घटना श्रोता के लिए सिर्फ सिंटैक्स चीनी है, दोनों $attr/$props में होंगे और इस प्रकार आसानी से पारित किया जा सकता है।

मुझे लगता है कि केवल एक चीज जिसके लिए बच्चे के विकल्पों के ज्ञान की आवश्यकता होगी, वह यह होगा कि यदि बच्चा model चूक को बदल देता है, तो यह सच है।

लेकिन परिस्थितियों के आधार पर उन्हें पढ़ना संभव होगा।

निश्चित रूप से यह एक वाक्यात्मक चीनी है, लेकिन मेरा मतलब है कि यह पढ़ने में भ्रमित करने वाला हो सकता है

इनका संयोजन हमें इस तरह के एक घटक को सरल बनाने की अनुमति देता है:

जब वास्तव में उदाहरण के आधार पर https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue , आप समान नियंत्रण प्राप्त करने के लिए सीधे श्रोताओं को पास नहीं कर सकते। (उदाहरण: आपको v-on:input="emitInput($event.target.value)" का उपयोग करना होगा)

वैसे भी, यह पीआर मूल्यवान है, अच्छा काम!

@AlexandreBonaventure ऐसा इसलिए है क्योंकि v-model तत्वों की तुलना में घटकों पर थोड़ा अलग तरीके से काम करता है। DOM ईवेंट कॉलबैक के लिए एक ईवेंट ऑब्जेक्ट प्रदान करते हैं, जबकि घटक ईवेंट सीधे एक मान प्रदान करते हैं। परिणाम यह है कि v-model _does_ काम करता है, लेकिन बाध्य मान DOM का ईवेंट ऑब्जेक्ट है। मैं

मुझे लगता है कि आप सही हैं कि v-model लिए यहां काम करना वांछनीय होगा, लेकिन मुझे यकीन नहीं है कि इसे हल करने के लिए सबसे अच्छी जगह कहां होगी। कुछ विचार:

हो सकता है कि एक गैर गणनीय संपत्ति को जोड़ा जा सकता है $listeners (जैसे __$listeners__: true , मदद करने के लिए v-on का उपयोग करता है का पता लगाने के v-on="$listeners" मामलों में। तब जहां $listeners ऑब्जेक्ट को पास कर दिया गया है v-on , प्रत्येक श्रोता को लपेटा जा सकता है:

function (event) {
  listener(event.target.value)
}

एक नकारात्मक पहलू यह है कि अब हम डेटा फेंक रहे हैं। उदाहरण के लिए, अगर कोई keyCode का उपयोग करना चाहता है, तो वह भाग्य से बाहर है। हालाँकि, यदि संशोधक v-on के ऑब्जेक्ट सिंटैक्स के लिए समर्थित थे, तो हम .native को स्वचालित रैपिंग व्यवहार को अक्षम करके इसे ठीक कर सकते हैं।

@yyx990803 @LinusBorg व्यवहार्यता पर आपके क्या विचार हैं? कोई किनारे के मामले मुझे याद आ रहे हैं?

ओह, मैं देख रहा हूँ, आप rral पर v-model की बात कर रहे हैं। फॉर्म तत्व, मैं इसके बारे में घटकों पर सोच रहा था।

आप इस पीआर के साथ या उसके बिना वैसे भी प्रॉप्स पर इसका उपयोग नहीं कर सकते हैं। और उन्नत ऐप्स में, इसका उपयोग करना असामान्य है (हालांकि प्राप्त करने योग्य)।

@LinusBorg बस यह सुनिश्चित करना चाहते हैं कि हम एक ही पृष्ठ पर हैं। इस टेम्पलेट के साथ CustomInput घटक दिया गया है:

<div>
  <input v-bind="$attrs" v-on="$listeners">
<div>

आप नीचे दिए गए कोड के काम करने की उम्मीद नहीं करेंगे?

<CustomInput v-model="myValue" />

मैं उम्मीद करता हूं कि यह काम करे - लेकिन जिस तरह से मैंने एलेक्जेंड्रे को समझा, वह तत्व पर वी-मॉडल का जिक्र कर रहा था, न कि घटक - जो अंततः केवल स्थानीय राज्य को बदलने के साथ काम करता है।

मैं यह कहने की कोशिश कर रहा था कि @chrisvfritz ने अपने बाद के पोस्ट में क्या समझाया। (अंग्रेजी मेरी मूल भाषा नहीं है क्षमा करें :))

@LinusBorg नवीनतम रिलीज में ऐसा करने में समस्या यह है कि इसे अभी भी एक विरोधी पैटर्न माना जाता है और राज्य को बदलने के बारे में चेतावनी ट्रिगर करता है।

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

<template>
    <select class="combo" v-model="value" v-on="$listeners"> 
      <option v-for="(item, key) in items" :value="item">{{key}}</option>
    </select>
</template>

<script>
export default {
    props: {
        items: {
            type: Object,
            required: true
        },

        value: {}
    }
}
</script>

यह उन सूचियों में से एक का उदाहरण है जिनका मैं माता-पिता में आइटम के लिए उपयोग करता हूं:

            execList: {
                "None": ACT_EXEC_TYPES.NONE,
                "Function": ACT_EXEC_TYPES.FUNCTION,
                "Code": ACT_EXEC_TYPES.CODE
            }

और मैं कॉम्बो घटक का उपयोग कैसे करता हूं:

<combo :items="execList" v-model="selectedAction.execType"/>

मैं इस काम को 2 दिनों से करने की कोशिश कर रहा हूं और अभी भी वास्तव में निराश हो रहा हूं। समस्या यह है कि $event.target.value हमेशा एक स्ट्रिंग है और इसका मूल्यांकन नहीं किया जाता है जैसे कि यह :value में होना चाहिए।

@LinusBorg @AlexandreBonaventure @RobertBColton मैंने अभी एक मुद्दा खोला है जहां हम इस समस्या की भविष्य की चर्चा पर ध्यान केंद्रित कर सकते हैं।