VueJS में गतिशील घटक को गतिशील रूप से पास करना

Question

मेरे पास एक गतिशील दृश्य है:

<div id="myview">
  <div :is="currentComponent"></div>
</div>

एक संबंधित Vue उदाहरण के साथ:

new Vue ({
  data: function () {
    return {
      currentComponent: 'myComponent',
    }
  },
}).$mount('#myview');

यह मुझे अपने घटक को गतिशील रूप से बदलने की अनुमति देता है।

मेरे मामले में, मैं तीन अलग-अलग घटकों: myComponent, myComponent1, और myComponent2। और मैं उनके बीच इस तरह से स्विच करता हूं:

Vue.component('myComponent', {
  template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}

अब, मैं सहारा को पास करना चाहूंगा myComponent1।

जब मैं घटक प्रकार को बदलता हूं तो मैं ये प्रॉपर कैसे पास कर सकता हूं myComponent1?

Comments

आप तत्व पर गुण के माध्यम से सहारा पास करते हैं propName="propValue"। क्या यह आपका प्रश्न है?

— थैंक्स

मैं नहीं लिख सकता क्योंकि मैं कभी नहीं लिखता <myComponent1 propName="propValue">हूं कि मैं घटक को $parent.currentComponent = componentName

— क्रमिक रूप से

हाँ, लेकिन आप लिखते हैं <div :is="currentComponent"></div>। यहीं आप विशेषता जोड़ेंगे।

— थैंक्स

हां, लेकिन प्रॉप्स घटक पर निर्भर करता है। उदाहरण के लिए, myComponent1प्रॉप्स लें और प्रॉप्स myComponent2न लें

— एपिटोइल

Answer 1

गतिशील रूप से प्रॉप्स पास करने के लिए, आप v-bindअपने डायनामिक कंपोनेंट में निर्देश जोड़ सकते हैं और अपने प्रोप नाम और मूल्यों वाले ऑब्जेक्ट को पास कर सकते हैं :

तो आपका गतिशील घटक इस तरह दिखेगा:

<component :is="currentComponent" v-bind="currentProperties"></component>

और अपने Vue उदाहरण में, currentPropertiesवर्तमान घटक के आधार पर बदल सकते हैं:

data: function () {
  return {
    currentComponent: 'myComponent',
  }
},
computed: {
  currentProperties: function() {
    if (this.currentComponent === 'myComponent') {
      return { foo: 'bar' }
    }
  }
}   

तो अब, जब currentComponentहै myComponent, यह एक fooसंपत्ति के बराबर होगा 'bar'। और जब ऐसा नहीं होगा, तो कोई भी संपत्ति पारित नहीं होगी।

Comments

यह मेरे लिए काम क्यों नहीं कर रहा है? यह पहले घटक के लिए काम करता है, लेकिन मैं "currentComponent" को बदलने के बाद मुझे एक "e.currentProperties" मिलता है, जो बाल घटक पर अपरिभाषित है।

— रिकार्डो विगत्ती

@RicardoVigatti, आपके किसी भी कोड को देखे बिना, यह जानना बहुत कठिन है

— धन्यवाद

अरे, अगर मैं इसमें कुछ जोड़ना चाहता हूं <component>(here)</component>। यह संभव है?

— फेलिप मोरालेस

@FelipeMorales, हाँ, आपको बस उस <slot>घटक को डिफ़ॉल्ट रूप से परिभाषित करना होगा जिसे आप गतिशील रूप से प्रस्तुत कर रहे हैं। vuejs.org/v2/guide/compenders-slots.html

— धन्यवाद

स्टाइल गाइड का कहना है कि प्रोप नाम यथासंभव विस्तृत होना चाहिए। इस तरह नियम को तोड़ता है। यह भी मैं क्या उपयोग है, लेकिन मैं एक बेहतर समाधान के लिए देख रहा हूँ।

— कोरे कुपे

Answer 2

आप गणना की गई संपत्ति के बिना भी कर सकते हैं और ऑब्जेक्ट को इनलाइन कर सकते हैं।

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

V-Bind पर डॉक्स में दिखाया गया - https://vuejs.org/v2/api/#v-bind

Answer 3

आप इसे पसंद कर सकते हैं ...

comp: { component: 'ComponentName', props: { square: true, outlined: true, dense: true }, model: 'form.bar' }
     

<component :is="comp.component" v-bind="{...comp.props}" v-model="comp.model"/>

Answer 4

यदि आपने आवश्यकता के माध्यम से आपको कोड आयात किया है

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')

और नीचे के रूप में डेटा उदाहरण को जन्म देना

data: function () {
            return {
                currentView: patientDetailsEdit,
            }

आप घटक को नाम संपत्ति के माध्यम से भी संदर्भित कर सकते हैं यदि आपने आर घटक को सौंपा है

currentProperties: function() {
                if (this.currentView.name === 'Personal-Details-Edit') {
                    return { mode: 'create' }
                }
            }