將數據從子組件傳遞給子組件Vuejs 2

Question

我誤解了將子組件傳遞給其他子組件的文檔。

我有兩個組成部分

的index.html

<main-categories-products source="{{ url('api/products') }}"> 
</main-categories-products> 

<sidebar-options> </sidebar-options> 

我app.js

var app = new Vue({ 
    el: '#app', 
    components: { 
    MainCategoriesProducts, 
    SidebarOptions 
    } 

}) 

MainCategoriesProducts.vue

import Vue from 'vue' 
var bus = new Vue() 
    export default{ 
     props: ['source'], 
     created(){ 

      this.fetchedProduct() 
     }, 
     methods: { 

      fetchedProduct: function(){ 


         var data = [1,2, 3]; 

         bus.$emit('did-something', data); 


      } 
     } 
    } 

我SidebarOptions.vue

import Vue from 'vue' 
    var bus = new Vue() 

    export default{ 

     data(){ 

      return { 

       someData: {} 
      } 
     }, 

     created(){ 

      bus.$on('did-something', data => this.someData = data); 
      console.log(this.someData) 

     } 
    } 

沒有錯誤，但我無法從MainCategoriesProducts獲取數據到SidebarOptions。我怎樣才能得到這些數據= [1，2，3]？ TY

Answer 1

您正在創建兩條不同的巴士，您應該創建一條巴士。

在app.js添加此

window.bus = new Vue(); 

，並刪除

var bus = new Vue() 

從每個部件的

。