2016-01-21 18 views
9

में गैर अभिभावक-बच्चे घटकों के बीच डेटा साझा कर सकते हैं मैं 3 घटकों (मिल-उन, मिल-परियोजनाओं, मिल-कार्य) है - प्रत्येक एक बटन जो कुछ डेटा पुनर्प्राप्त करने के लिए एक ajax अनुरोध आग में शामिल है। मैं पेज पर एक चौथे स्वतंत्र घटक (शो-परिणाम) में प्रदर्शित होने के लिए AJAX अनुरोध से डेटा वापस लौटा चाहता हूं। जैसेमैं कैसे Vue

<div class="row"> 
    <div class="col-md-6> 
     <get-users></get-users> 
     <get-projects></get-projects> 
     <get-tasks></get-tasks> 
    </div> 
    <div class="col-md-6> 
     <show-results></show-results> 
    </div> 
</div> 

get-उन घटक:

<script> 
export default { 
    template: require('./get_users.template.html'), 

    data: function() { 
     return { 
      userList: '' 
     } 
    }, 

    methods: { 
     getUsers(e) { 
      e.preventDefault(); 

       this.$http.get('api/getusers').then(function (response) { 
        this.userList = response.data.users; // How can I also pass this to the show-results component?   
      }) 
     } 
    } 
} 
</script> 

Vue उदाहरण/decalaration

var Vue = require('vue'); 

Vue.use(require('vue-resource')); 

import getUsers from './components/get_users.vue'; 
import getProjects from './components/get_projects.vue'; 
import getTasks from './components/get_tasks.vue'; 
import showResults from './components/show_results.vue'; 


    new Vue ({ 
    el: '#app', 

    components: { GetUsers, GetProjects, GetTasks, ShowResults }, 

}) 

शो परिणाम घटक के रूप में एक माता पिता/बच्चे का रिश्ता मैं का हिस्सा नहीं है एपीआई के $ प्रसारण या $ प्रेषण विधियों का उपयोग नहीं कर सकते हैं।

यह ajax वादा के पूरा होने पर एक से दूसरे घटक से डेटा पारित करने के लिए संभव है?

+0

वे कर रहे हैं सुनने के लिए वही रूट वू उदाहरण के भीतर दोनों? – nils

+0

हां, वे हैं। मैंने वू घोषणा दिखाने के लिए मूल पोस्ट संपादित किया है। –

उत्तर

2

नोट: इस सवाल का जवाब Vue 1

उदाहरण के लिए आप रूट Vue उदाहरण से एक प्रसारण कर सकता है के लिए ही मान्य है। this.$root आपको अपने वर्तमान vue उदाहरण में रूट घटक तक पहुंच प्रदान करता है। इस प्रकार वह अपने बच्चों पर पहुंच जाएगा:

<script> 
export default { 
    template: require('./get_users.template.html'), 

    data: function() { 
     return { 
      userList: '' 
     } 
    }, 

    methods: { 
     getUsers(e) { 
      e.preventDefault(); 

       this.$http.get('api/getusers').then(function (response) { 
        this.userList = response.data.users; 
        this.$root.broadcast('show-results:users', { users: response.data.users }); 
      }) 
     } 
    } 
} 
</script> 

तो फिर आप अपने show-results घटक में show-results:users घटना के लिए सुन:

events: { 
    'show-results:users': function(data) { 
     // do your stuff here 
    } 
} 
बेशक

आप घटना का कोई भी नाम करना चाहते हैं दे सकते हैं।

+0

यह बढ़िया है, धन्यवाद! –

10

Vue 2.0 बातों के साथ कुछ अलग रूप में प्रसारण पदावनत किया गया है कर रहे हैं। Vue documentation इसे पूरा करने के लिए केंद्रीकृत ईवेंट बस का उपयोग करने के बारे में बात करता है। यहां बताया गया है कि आप इसे कैसे कर सकते हैं;

  1. केंद्रीकृत ईवेंट हब को परिभाषित करें। तो अपने Vue उदाहरण/decalaration में

    this.eventHub.$emit('show-results:users', { users: response.data.users }) 
    
  2. साथ

    const eventHub = new Vue() // Single event hub 
    
    // Distribute to components using global mixin 
    Vue.mixin({ 
        data: function() { 
         return { 
          eventHub: eventHub 
         } 
        } 
    }) 
    
  3. अब आप अपने घटक में आप कर सकते हैं फेंकना गतिविधि को परिभाषित और तुम कर

    this.eventHub.$on('show-results:users', data => { 
    // do your thing 
    }) 
    
+0

क्षमा करें मैं vue के लिए नया हूं और इस समस्या को हल करने के लिए चाहता हूं 2. क्या आप जो कर रहे हैं उस पर थोड़ा सा विस्तार कर सकते हैं? – daslicious

+0

एनएम, मुझे यह https://vuejs.org/v2/guide/components.html#Non- parent-Child-Communication – daslicious

+0

"शो-परिणाम:" ईवेंट नाम का केवल एक हिस्सा है या यह कुछ vue-specific है वाक्य - विन्यास? –

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