开发者问题收集

将数据从子组件传递到子组件 Vuejs 2

2017-05-05
350

我误解了将子组件传递给其他子组件的文档。

我有两个组件

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]?谢谢

1个回答

您正在创建两辆不同的总线,但您应该只创建一辆。

在 app.js 中添加此

window.bus = new Vue();

并从每个组件中删除

var bus = new Vue()

Bert
2017-05-05