将数据从子组件传递给子组件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() 

从每个部件的

。