VueJS असंबद्ध (माता-पिता/बच्चे के रूप में) घटकों से कनेक्ट

Question

मैं vue.js की खोज कर रहा हूं और इस बारे में कोई प्रश्न है कि एक निश्चित समस्या को कैसे संबोधित किया जा सकता है। (देशी नियंत्रण के साथ छिपा हुआ)

<div class="container"> 
    <div class="stage"> 
     <map :current-time="currentTime" :recording="recording"></map> 
     <player :track="track" :current-time="currentTime"></player> 
    </div> 
    <control-panel :current-time="currentTime"></control-panel> 
</div> 

असल में, <player> घटक है कि अंदर <video> तत्व निर्दिष्ट ट्रैक लोड होगा:

मेरे जड़ घटक निम्न टेम्पलेट है। इस प्रकार, यह वास्तव में एप्लिकेशन की स्थिति को ड्राइव करेगा क्योंकि वीडियो (वर्तमान समय, प्लेबैक स्थिति इत्यादि) के माध्यम से खेलता है। हालांकि, <control-panel> में स्क्रब बार और बटन हैं जो वीडियो स्थिति (प्ले/पॉज़, तलाश) को निर्देशित करते हैं। जाहिर है, घटकों में से एक में इस सामान्य स्थिति को बदलने से दूसरे दो घटकों को प्रभावित किया जाएगा (मानचित्र वर्तमान समय के अनुसार भी प्रगति करेगा)।

हालांकि, मुझे आश्चर्य है कि यह अधिक समझ में आएगा और क्या वे घटकों के संदर्भ प्रदान करने का समर्थन करते हैं ताकि मैं <player> के संदर्भ में प्रदान कर सकूं ताकि यह सीधे राज्य परिवर्तन ले सके।

या इसे वैश्विक स्तर पर पारित होने वाले बच्चों या घटना-प्रसारण मार्ग में किया जाना चाहिए? ठीक होने से पहले, एक उदाहरण पर विचार करें जहां दो <player> एस और दो <control-panel> एस हैं जो पदानुक्रमित नहीं हैं लेकिन एक पैनल ए प्लेयर ए और पैनलबी के साथ पैनलबी के साथ काम करता है। इस मामले में, मुझे लगता है कि प्रसारण विकल्प तालिका से गिर जाता है, सही?

किसी भी सुझाव का स्वागत है विशेष रूप से इसलिए क्योंकि मैं सिर्फ वू सीख रहा हूं।

अद्यतन 1

तो Vue से अधिक परिचित एक सा हो रही है और समुदाय से वापस सुनने के बाद, मुझे लगता है कि मैं <player> और <control-panel> एक साथ सिंक्रनाइज़ करने के लिए एक चतुर समाधान के साथ आ गए हैं। निम्नलिखित मेरे मार्कअप परिवर्तन:

<div class="container"> 
    <div class="stage"> 
     <map :current-time="currentTime" :recording="recording"></map> 
     <player :track="track" :current-time="currentTime" v-ref:player></player> 
    </div> 
    <control-panel :current-time="currentTime" v-ref:player-controls :player="$refs.player"></control-panel> 
</div> 

सूचना <player> और <control-panel> को v-ref विशेषताओं के अलावा के साथ ही बाद में :player="$refs.player" विशेषता। यह मुझे एक दूसरे से तार्किक रूप से एक साथ बांधने की अनुमति देता है। मेरे सिर में, नियंत्रण कक्ष के लिए यह समझ में आता है कि यह कौन जानता है या यह किस पर नियंत्रण कर रहा है। मैं इसे आगे परीक्षण करने जा रहा हूं लेकिन, अभी के लिए, यह काम करता प्रतीत होता है।

<map> को एक साथ जोड़ने के लिए, मैं प्रसारण का उपयोग कर समाप्त कर दूंगा या बस दो-तरफा currentTime<control-panel> द्वारा अपडेट किया जाएगा। जैसा कि मैं जाता हूं, मैं इस पोस्ट को अपडेट कर दूंगा और किसी भी उत्तर से अलग होने पर, सही उत्तर को चिह्नित कर सकता हूं या अपना खुद का पोस्ट करूंगा।

अद्यतन 2

नीचे मेरा उत्तर पढ़ें। मैं नीचे दिए गए दृष्टिकोण का उपयोग करके सफलतापूर्वक अपने मुद्दे को हल करने में सक्षम हूं।

Answer 1

में वर्णित दृष्टिकोण लेने में शामिल समाधान 1 अद्यतन करें। चूंकि <video> तत्व एपीआई के माध्यम से एक अच्छी तरह से सोचा है, इसे एक प्रतिक्रियाशील घटक में अनुवाद करना आसान था (हालांकि थकाऊ)।

'currentTime': { 
    cache: false, 
    get: function() { 
     return this.$els.player.currentTime; 
    }, 
    set: function (value) { 
     this.$els.player.currentTime = value; 
    } 
} 

संपत्ति cache: false विशेषता एक प्रतिक्रियाशील तत्व से बंधा नहीं है क्योंकि इस्तेमाल किया जाएगा और हर पुनः गणना की जानी चाहिए:

एक वीडियो तत्व के लिए आवरण निम्नलिखित तरीके से कई computed गुण बना दी समय विशेषता पूछताछ की गई थी।

घटक को पूरी तरह प्रतिक्रियाशील नहीं बनाना जानबूझकर था। यही है, मैं धारणा के साथ props के रूप में आवश्यक विशेषताओं को परिभाषित कर सकता था कि उन्हें माता-पिता द्वारा प्रदान और समन्वयित किया जा सकता था। जब भी <video> तत्व राज्य परिवर्तनकारी घटना को आग लगाएगा तो वे गुण आंतरिक रूप से अपडेट किए जाएंगे।

मैंने विधि का उपयोग कर घटक के माता-पिता को <video> तत्व की घटनाओं का प्रचार भी समाप्त कर दिया। ऐसा इसलिए किया गया क्योंकि घटकों ने बस एचएलएस की शुरुआत की और राज्य चालक के रूप में कार्य किया। इस प्रकार, यह स्वीकार्य था कि यह पूरी तरह से प्रतिक्रियाशील न हो और सादे <video> तत्व की नकल न करें।

नियंत्रण कक्ष ने अद्यतन 1 में वर्णित प्लेयर घटक का सफलतापूर्वक संदर्भित किया। खिलाड़ी पर एक संभाल प्राप्त करने के बाद, $on के साथ अपनी घटनाओं की सदस्यता लेना आसान था और फिर राज्य बदलती घटना पर इसकी गणना की गई संपत्तियों के खिलाफ बस मारा गया।

अंत में, नक्शा लागू करने के लिए थोड़ा आसान था क्योंकि यह अन्य सभी वू उदाहरणों में वर्णित कम या ज्यादा सरल प्रवाह का पालन करता था। हकीकत में, मानचित्र के माता-पिता ने वर्तमान समय का ट्रैक रखा। यह चर वास्तव में :currentTime.sync="currentTime" विशेषता का उपयोग कर नियंत्रण कक्ष द्वारा अद्यतन किया गया था। हालांकि, मानचित्र पर, ऐसा लगता है जैसे माता-पिता स्वयं ही समय अपडेट कर रहे थे।

Answer 2

मुझे लगता है कि उन्हें स्वतंत्र घटकों के रूप में छोड़ना अच्छा विचार है;

आप तो नियंत्रण पैनल घटक जब भी आप दूसरे के साथ करना चाहते हैं का उपयोग करता है बाहर स्विच कर सकता है एक ही इंटरफ़ेस

(सिर्फ एक ई-कॉमर्स अनुप्रयोग में कुछ अन्य भुगतान प्रोसेसर के साथ धारी से स्विच की तरह)

$broadcasting और $dispatching जब तक आप प्रत्येक प्रसारण/प्रेषण के साथ एक पहचानकर्ता कुंजी के साथ पास करते हैं तब तक कई खिलाड़ियों के साथ भी अच्छी तरह से काम करता है ताकि संदेश प्राप्त करने वाले प्रत्येक घटक को तुरंत यह निर्धारित किया जा सके कि यह उनके लिए भेजा गया था या नहीं।