如何解决未捕获的ReferenceError：未定义总线？ （vue.js 2）

问题描述

我遵循本教程：

将数据从组件传递到其他组件

It to passing data from a component to other component

请参阅下面的情况。我试试这样

See my case below. I try like that

我的观点是这样的：

<div class="row">
    <div class="col-md-3">
        <search-filter-view ...></search-filter-view>
    </div>
    <div class="col-md-9">
        <search-result-view ...></search-result-view>
    </div>
</div>

我的搜索过滤器视图组件是这样的：

My search-filter-view component is like this :

<script>
    export default{
        props:[...],
        data(){
            return{
                ...
            }
        },
        methods:{
            filterBySort: function (sort){
                bus.$emit('sort-param', sort)
                this.sort = sort
                ...
            }
        }
    }
</script>

我的搜索结果视图组件是这样的：

My search-result-view component is like this :

<script>
    export default {
        props:[...],
        data() {
            return {
                ...
            }
        },

        methods: {
            getVueItems: function(page) {
                bus.$on('sort-param', function (sort) {
                    console.log(sort);
                })
                ...
            }
        }
    }
</script>

我添加 var bus = new Vue（）; on \resources\assests\js\app.js

And I add var bus = new Vue(); on \resources\assests\js\app.js

所以它可以在任何地方访问

So it can be accessed anywhere

我希望sort参数（filterBySort方法，组件一）的显示值为getVueItems方法（组件二）

I want display value of sort parameter (filterBySort method, component one) to getVueItems method (component two)

执行时，在控制台中存在这样的错误：

When executed, in the console exist error like this :

如何解决错误？

推荐答案

您需要从<$ c $导出变量总线c> App.vue 并将其导入到你需要的地方。

You will need to to export the variable bus from the App.vue and import it where ever you need it.

我个人所做的是为它创建一个专用文件： bus.js

What I personally do is I create a dedicated file for it: bus.js

import Vue from 'vue'
export default new Vue()

并在需要时将其导入：

import bus from 'path/of/bus'
<script>
    export default{
        props:[...],
        data(){
            return{
                ...
            }
        },
        methods:{
            filterBySort: function (sort){
                bus.$emit('sort-param', sort)
                this.sort = sort
                ...
            }
        }
    }
</script>

这篇关于如何解决未捕获的ReferenceError：未定义总线？ （vue.js 2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！