2017-03-24 8 views
9

एक Vue 2.0 ऐप्लिकेशन में, मान लीजिए कि हम घटक ए, बी और सीक्या प्रोप के रूप में एक घटक को पास करना संभव है और इसे वू में एक बच्चे घटक में उपयोग करना संभव है?

एक वाणी, रजिस्टर और

एक से सी पारित करने के लिए यह संभव है बी को बी का उपयोग करता है है?

कुछ इस तरह:

<template> 
    <div class="A"> 
    <B :child_component="C" /> 
    </div> 
</template> 

और उपयोग बी में सी किसी भी तरह।

<template> 
    <div class="B"> 
    <C>Something else</C> 
    </div> 
</template> 

प्रेरणा: मैं एक सामान्य घटक B कि A में प्रयोग किया जाता है, लेकिन A अपने बच्चे C से प्राप्त करता है बनाना चाहते हैं। असल में AB का उपयोग कई बार 'सी' से गुजरने के कई बार करेगा।

यदि यह दृष्टिकोण सही नहीं है, तो इसे वू में करने का उचित तरीका क्या है?

@Saurabh

का जवाब करने के बजाय रंगमंच की सामग्री के रूप में गुजर रहा है, मैं बी

<!-- this is where I Call the dynamic component in B --> 

<component :is="child_component"></component> 

//this is what I did in B js 
components: { 
equip: Equipment 
}, 
data() { 
return { 
    child_component: 'equip', 
    _list: [] 
} 
} 

असल में मैं उपकरण रेंडर करने के लिए कोशिश कर रहा हूँ अंदर सुझाव कोशिश की, लेकिन गतिशील रास्ता

मुझे कंसोल में 3 त्रुटियां मिलती हैं और एक खाली पृष्ठ

[Vue warn]: Error when rendering component at /home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vue:

Uncaught TypeError: Cannot read property 'name' of undefined

TypeError: Cannot read property 'setAttribute' of undefined

स्पष्ट रूप से मैं कुछ गलत कर रहा हूं

+0

क्या आप वाकई इन त्रुटियों को केवल इन कोड से आ रहे हैं, जहां आप setAttribute उपयोग कर रहे हैं '' या 'नाम 'विशेषता? – Saurabh

+0

कुछ आंतरिक प्रक्रिया होनी चाहिए। मैं इस ऐप में ऐसा नहीं कर रहा हूं –

उत्तर

4

आप इस तरह की चीज करने के लिए विशेष विशेषता is का उपयोग कर सकते हैं। गतिशील घटक का उदाहरण और इसका उपयोग here पाया जा सकता है।

You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute:

आपका कोड निम्नलिखित तरह दिखेगा:

<template> 
    <div class="B"> 
    <component :is="child_component"> Something else</component> 
    </div> 
</template> 
+0

यहां काम नहीं कर रहा है, लेकिन मुझे नहीं पता कि वास्तव में क्या हो रहा है। मैं अधिक जानकारी के साथ अपने प्रश्न को अद्यतन करूंगा –

7

संक्षेप:

<!-- Component A --> 
<template> 
    <div class="A"> 
    <B> 
     <component :is="child_component"></component> 
    </B> 
    </div> 
</template> 

<script> 
import B from './B.vue'; 
import Equipment from './Equipment.vue'; 

export default { 
    name: 'A', 
    components: { B, Equipment }, 
    data() { 
    return { child_component: 'equipment' }; 
    } 
}; 
</script> 

<!-- Component B --> 
<template> 
    <div class="B"> 
    <h1>Some content</h1> 
    <slot></slot> <!-- Component C will appear here --> 
    </div> 
</template> 
संबंधित मुद्दे

 संबंधित मुद्दे