2015-12-29 22 views
20

मैं दो Vue घटक:Vue घटकों संचार

Vue.component('A', {}); 

Vue.component('B', {}); 

मैं कैसे घटक बी से घटक एक पहुँच सकता है? संचार घटकों के बीच कैसे काम करता है?

उत्तर

25

क्रॉस-घटक संचार Vue.js दस्तावेज़ों में अधिक ध्यान नहीं देता है, और न ही इस विषय को कवर करने वाले कई ट्यूटोरियल हैं। चूंकि घटकों को अलग किया जाना चाहिए, आपको किसी घटक को सीधे "एक्सेस" नहीं करना चाहिए। यह घटकों को एक साथ जोड़ देगा, और यह वही है जो आप करना बंद करना चाहते हैं।

जावास्क्रिप्ट संचार के लिए एक उत्कृष्ट विधि है: घटनाएं। Vue.js में अंतर्निहित इवेंट सिस्टम है, मुख्य रूप से अभिभावक-बाल संचार के लिए उपयोग किया जाता है। From the docs:

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

var parent = new Vue({ 
    template: '<div><child></child></div>', 
    created: function() { 
    this.$on('child-created', function (child) { 
     console.log('new child created: ') 
     console.log(child) 
    }) 
    }, 
    components: { 
    child: { 
     created: function() { 
     this.$dispatch('child-created', this) 
     } 
    } 
    } 
}).$mount() 

दान Holloran हाल ही में पार घटक संदेश सेवा के साथ अपने "संघर्ष" पर एक टुकड़ा लिखा है twopieces में,:

उनके उदाहरण कोड घटना प्रणाली वर्णन करने के लिए। यह आपके लिए सहायक हो सकता है अगर आपको उन घटकों के बीच संचार की आवश्यकता है जिनके माता-पिता के बच्चे के रिश्ते नहीं हैं।

एक अन्य दृष्टिकोण जिसके साथ मुझे अनुभव है (संचार के लिए घटनाओं का उपयोग करने के अलावा), केंद्रीय घटक रजिस्ट्री का उपयोग कर रहा है जिसमें सार्वजनिक एपीआई का संदर्भ है जो इसके लिए एक घटक के उदाहरण के साथ है। रजिस्ट्री एक घटक के लिए अनुरोध संभालती है और इसकी सार्वजनिक एपीआई देता है।

Vue.js के संदर्भ में, ईवेंट मेरे पसंद के हथियार से होगा।

+4

कृपया ध्यान दें कि यह अभिभावक/बाल संचार प्रणाली vue 2.0 के भविष्य के संस्करणों के साथ '$ प्रेषण 'और' $ प्रसारण' के रूप में काम नहीं करेगा [https://github.com/vuejs/vue/issues/2873)। – hitautodestruct

9

पेस्ला के उत्तर के अलावा गाइड की State Management section under Building large scale apps: http://vuejs.org/guide/application.html#State_Management पर एक नज़र डालें। मैंने यहां jsfiddle बनाया है जो उस पर आधारित है: https://jsfiddle.net/WarwickGrigg/xmpLg92c/

इस तकनीक घटकों के लिए भी काम करता है: अभिभावक-बच्चे, भाई-भाई घटक रिश्तों आदि घटकों के बीच

var hub = { 
    state: { 
    message: 'Hello!' 
    } 
} 

var vmA = new Vue({ 
    el: '#appA', 
    data: { 
     pState: { 
     dA: "hello A" 
    }, 
    hubState: hub.state 
    } 
}) 

var vmB = new Vue({ 
    el: '#appB', 
    data: { 
     pState: { 
     dB: "hello B" 
    }, 
    hubState: hub.state 
    } 
}) 
6

संचार भी अपने Vue आवेदन में एक भी वैश्विक घटना हब बनाने के द्वारा स्थापित किया जा सकता। कुछ इस तरह: -

var bus = new Vue();

अब आप कस्टम घटनाओं बना सकते हैं और किसी भी घटक से उन्हें सुन सकते हैं।

 // A.vue 
    // ... 
    doThis() { 
     // do the job 

     bus.$emit('done-this'); 
    } 

    // B.vue 
    // ... 
     method:{ 
      foo: function() 
      } 
    created() { 
     bus.$on('done-this', foo); 
    } 

इसके बारे में अधिक जानकारी from official documentation. मिल सकती है।

+0

एक साइड नोट के रूप में, बहु-फाइल घटकों 'बस' के लिए सभी घटकों को किसी तरह दिखने की आवश्यकता होगी।मैं एक वैश्विक 'विंडो' वैरिएबल (जिसे एक बुरा विचार कहा जाता है) का उपयोग करता हूं क्योंकि मैं इसे आयात करने के तरीके में' आयात 'नहीं कर सका – WoJ

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