VueJS

Question

में घटकों के बीच डाटा साझा करने के लिए मैं एक काफी सरल VueJS अनुप्रयोग, 3 घटकों (लॉग इन, SelectSomething, DoStuff)

लॉग इन घटक बस उपयोगकर्ता के लिए एक रूप है और जबकि दूसरे घटक प्रदर्शित करने के लिए की जरूरत है इनपुट पारित किया है लॉगिन प्रगति में प्राप्त कुछ डेटा।

मैं डेटा को एक घटक से दूसरे में कैसे साझा कर सकता हूं? इसलिए जब मैं दूसरे घटक तक पहुंचता हूं तो मेरे पास अभी भी लॉगिन में प्राप्त डेटा है?

Answer 1

आप props या एक घटना बस, जहां आप एक घटक से एक घटना का उत्सर्जन और एक अन्य

vm.$on('test', function (msg) { 
    console.log(msg) 
}) 

vm.$emit('test', 'hi') 
// -> "hi" 

Answer 2

Vue.js घटकों में पर सुनने के लिए एक दूसरे को props का उपयोग कर के साथ संवाद कर सकते हैं सक्षम हो जाएगा उपयोग कर सकते हैं या events। यह सब आपके घटकों के बीच संबंधों पर निर्भर करता है।

के इस छोटे से उदाहरण लेते हैं:,

<template> 
<h2>Parent Component</h2> 
<child-component :propsName="example"></child-component> 
</template> 

<script> 
export default { 
data(){ 
    return{ 
    example: 'Send this variable to the child' 
    } 
} 
} 
</script> 

माता-पिता के लिए बच्चे से जानकारी भेजने के लिए:

<template> 
<h2>Parent Component</h2> 
<child-component></child-component> 
</template> 

बच्चे को माता-पिता से जानकारी भेजने के लिए आप रंगमंच की सामग्री का उपयोग करने की आवश्यकता होगी,

बाल घटक

<script> 
... 
this.$emit('example', this.variable); 
</script> 

: आप घटनाओं का उपयोग करने की आवश्यकता होगी

जनक घटक

<template> 
<h2>Parent Component</h2> 
<child-component @example="methodName"></child-component> 
</template> 

<script> 
export default { 
methods: { 
    methodName(variable){ 
    ... 
    } 
} 
} 
</script> 

चेक इस विषय के बारे में अधिक जानकारी के लिए vue.js के प्रलेखन। यह एक बहुत ही संक्षिप्त परिचय है।