पासिंग रंगमंच की सामग्री गतिशील घटक को गतिशील VueJS

Question

में मैं एक गतिशील दृश्य है।

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

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

अब, मैं myComponent1 को रंगमंच की सामग्री पारित करने के लिए करना चाहते हैं।

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

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' } 
    } 
    } 
} 

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

Answer 2

आप आयात किया है तो आप के माध्यम से

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

आवश्यकता कोड और नीचे के रूप में डेटा उदाहरण initalize

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

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

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