vue.js

2015-12-30 24 views
39

में घटकों को डेटा पास करना मैं समझने के लिए संघर्ष कर रहा हूं कि vue.js. में घटकों के बीच डेटा कैसे पास किया जाए। मैंने कई बार दस्तावेज़ों के माध्यम से पढ़ा है और कई vue संबंधित प्रश्नों और ट्यूटोरियल को देखा है, लेकिन मुझे अभी भी यह नहीं मिल रहा है।vue.js

इस के आसपास मेरे सिर लपेटो करने के लिए, मैं एक बहुत ही सरल उदाहरण

  1. प्रदर्शन उपयोगकर्ताओं की सूची एक घटक (किया)
  2. एक नया घटक जब करने के लिए उपयोगकर्ता डेटा भेजने में पूरा करने में मदद के लिए आशा करता हूं एक लिंक क्लिक किया गया है (किया गया) - नीचे अद्यतन देखें।
  3. उपयोगकर्ता संपादित डेटा और मूल घटक को वापस भेज (नहीं मिला है इतनी दूर)

यहाँ एक बेला, जो कदम दो पर विफल रहता है: https://jsfiddle.net/retrogradeMT/d1a8hps0/

मैं समझता हूँ कि मैं उपयोग करने की आवश्यकता नए घटक को डेटा पास करने के लिए प्रोप, लेकिन मुझे यकीन नहीं है कि इसे कार्यात्मक रूप से कैसे करें। मैं डेटा को नए घटक में कैसे बांधूं?

HTML: मुख्य घटक के लिए

<div id="page-content"> 
     <router-view></router-view> 
    </div> 

<template id="userBlock" > 
    <ul> 
    <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a> 
    </li> 
    </ul> 
</template> 

    <template id="newtemp" :name ="{{user.name}}"> 
    <form> 
     <label>Name: </label><input v-model="name"> 
     <input type="submit" value="Submit"> 
    </form> 
    </template> 

js: दूसरे घटक के लिए

Vue.component('app-page', { 
    template: '#userBlock', 

    data: function() { 
    return{ 

     users: [] 
     } 
    }, 

ready: function() { 
    this.fetchUsers(); 
}, 

methods: { 
    fetchUsers: function(){ 
     var users = [ 
      { 
      id: 1, 
      name: 'tom' 
      }, 
      { 
      id: 2, 
      name: 'brian' 
      }, 
      { 
      id: 3, 
      name: 'sam' 
      }, 
     ]; 

     this.$set('users', users); 
    } 
    } 
    }) 

जे एस:

Vue.component('newtemp', { 
    template: '#newtemp', 
    props: 'name', 
    data: function() { 
    return { 
     name: name, 
     } 
    }, 
}) 

अद्यतन

ठीक है, मुझे दूसरा कदम पता चला है। प्रगति दिखाते हुए एक नया पहेली यहां दिया गया है: https://jsfiddle.net/retrogradeMT/9pffnmjp/

क्योंकि मैं वू-राउटर का उपयोग कर रहा हूं, मैं डेटा को नए घटक में भेजने के लिए प्रोप का उपयोग नहीं करता हूं। इसके बजाय, मुझे वी-लिंक पर सेट पैरा सेट करने की आवश्यकता है और फिर इसे स्वीकार करने के लिए एक संक्रमण हुक का उपयोग करें।

वि लिंक में परिवर्तन see named routes in vue-router docs:

Vue.component('newtemp', { 
    template: '#newtemp', 
    route: { 
    data: function(transition) { 
     transition.next({ 
      // saving the id which is passed in url 
      name: transition.to.params.name 
     }); 
    } 
    }, 
data: function() { 
    return { 
     name:name, 
     } 
    }, 
}) 

उत्तर

26

------------- के बाद 1 --------------

पासिंग डेटा कई मायनों में किया जा सकता है केवल Vue के लिए लागू है । विधि उपयोग के प्रकार पर निर्भर करता है।


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

<my-component prop-name="value"></my-component> 

यह प्रोप मूल्य अपने घटक के लिए उपलब्ध हो जाएगा।


जब कुछ गतिशील या स्थैतिक घटना के कारण किसी घटक से डेटा किसी दूसरे घटक से पास हो जाता है। यह घटना प्रेषक और प्रसारणकर्ताओं का उपयोग करके किया जाता है। उदाहरण के लिए आप इस तरह एक घटक संरचना है यदि:

this.$dispatch('event_name', data); 

इस घटना को देगा:

<my-parent> 
    <my-child-A></my-child-A> 
    <my-child-B></my-child-B> 
</my-parent> 

और आप डेटा <my-child-A> में तो <my-child-B> को <my-child-A> से भेजना चाहते हैं तो आप एक घटना प्रेषण करने के लिए होगा माता-पिता श्रृंखला तक सभी तरह से यात्रा करें। और जो भी माता-पिता से आपके पास <my-child-B> की ओर एक शाखा है, आप ईवेंट को डेटा के साथ प्रसारित करते हैं। तो माता-पिता में:

events:{ 
    'event_name' : function(data){ 
     this.$broadcast('event_name', data); 
    }, 

अब यह प्रसारण बाल श्रृंखला की यात्रा करेगा। और जो भी बच्चे को आप घटना हड़पने के लिए चाहते हैं, तो हमारे मामले <my-child-B> में हम एक और घटना जोड़ना होगा:

events: { 
    'event_name' : function(data){ 
     // Your code. 
    }, 
}, 

डेटा पास करने तीसरा रास्ता v-लिंक में पैरामीटर के माध्यम से है। इस विधि का उपयोग तब किया जाता है जब घटक श्रृंखला पूरी तरह नष्ट हो जाती है या ऐसे मामलों में जब यूआरआई बदलता है। और मैं देख सकता हूं कि आप उन्हें पहले ही समझ चुके हैं।


तय करें कि आप किस प्रकार का डेटा संचार चाहते हैं, और उचित रूप से चुनें।

+0

धन्यवाद, यह वास्तव में सहायक था। एकमात्र टुकड़ा जिसे मैं अभी भी संघर्ष कर रहा हूं, सम्मेलनों का नामकरण कर रहा है। i.e: मेरे पास user.name है जिसे मैं वी-लिंक के माध्यम से नाम के रूप में पास करता हूं। अब मैं नाम परिवर्तक को संपादित कर सकता हूं और इसे मूल घटक पर नाम के रूप में वापस भेज सकता हूं, लेकिन मूल घटक में नाम नामक एक var नहीं है। मुझे यहां क्या समझ नहीं आ रहा है? एक वस्तु को वी-लिंक के माध्यम से पास करने के लिए संभव नहीं दिखता है? – retrograde

+0

आप पहले से ही एक ऑब्जेक्ट पास कर रहे हैं। 'पैराम्स' एक वस्तु है। नाम कुंजी को आपके घटक में 'this.user.name' को असाइन किया जा सकता है। यदि आपको मदद की ज़रूरत है, तो मुझे एक पहेली बनाएं, और मुझे बताएं। इसे देखें: http://vuejs.github.io/vue-router/en/route.html – notANerdDev

+0

आह, ठीक है अब मुझे मिल गया है। एक बार फिर धन्यवाद। मैं आपकी मदद की सराहना करता हूं, यह वास्तव में चीजों को बहुत स्पष्ट बनाता है। – retrograde

8

मुझे लगता है कि यहां मुद्दा यह है:

<template id="newtemp" :name ="{{user.name}}"> 

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a> 

फिर घटक पर, डेटा मार्ग विकल्प see transition hooks में जोड़ें

जब आप : के साथ प्रोप उपसर्ग करते हैं तो आप संकेत देते हैं वू पर निर्भर करता है कि यह एक चर है, एक स्ट्रिंग नहीं। इसलिए आपको {{}}user.name के आसपास की आवश्यकता नहीं है। प्रयास करें:

<template id="newtemp" :name ="user.name"> 

संपादित करें -----

ऊपर सही है, लेकिन यहां बड़ा मुद्दा यह है कि जब आप यूआरएल को बदलने और एक नया मार्ग पर जाते हैं, मूल घटक गायब हो जाता है है। दूसरे घटक को मूल डेटा संपादित करने के लिए, दूसरे घटक को पहले व्यक्ति का एक बाल घटक होना चाहिए, या केवल उसी घटक का एक हिस्सा होना चाहिए।

+0

धन्यवाद जेफ। मैंने {{}} को हटाने का प्रयास किया लेकिन मुझे अभी भी वही त्रुटियां मिलती हैं। – retrograde

2

मुझे वू में घटक क्षेत्र में मूल डेटा पारित करने का एक तरीका मिला है, मुझे लगता है कि यह एक हैक का थोड़ा सा है लेकिन शायद यह आपकी मदद करेगा। एक बाहरी वस्तु के रूप में Vue उदाहरण में

1) संदर्भ डेटा (डेटा: dataObj)

2) तो फिर बच्चे घटक में डेटा वापसी समारोह में सिर्फ parentScope = dataObj और देखा वापस जाएँ। अब आप {{parentScope.prop}} जैसी चीजें नहीं कर सकते हैं और एक आकर्षण की तरह काम करेंगे।

शुभकामनाएं!

+0

दोनों घटकों को एक साथ जोड़ना जो पेड़ और उसके नोड्स के लिए ठीक हो सकता है, लेकिन आमतौर पर इसका अनुकूलन नहीं होता है। मैं इससे बचने की कोशिश करूंगा। – dec

0

किसी बच्चे को मूल घटक से डेटा भेजने का सबसे अच्छा तरीका props का उपयोग कर रहा है।

props

  • के माध्यम से बच्चे के लिए माता-पिता से डेटा पासिंग घोषित props बच्चे में (सरणी या object)
  • <child :name="variableOnParent">

के माध्यम से बच्चे को यह दर्रा डेमो नीचे देखें:

Vue.component('child-comp', { 
 
    props: ['message'], // declare the props 
 
    template: '<p>At child-comp, using props in the template: {{ message }}</p>', 
 
    mounted: function() { 
 
    console.log('The props are also available in JS:', this.message); 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    variableAtParent: 'DATA FROM PARENT!' 
 
    } 
 
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <p>At Parent: {{ variableAtParent }}</p> 
 
    <child-comp :message="variableAtParent"></child-comp> 
 
</div>