javascript - Event_Bus vue 变量访问单文件组件 Vue.js - Laravel Mix

Question

我只是想问一下vue的单文件组件如何访问变量？ 当我尝试在浏览器上访问我的应用程序时，vue js 将导致错误。

Error in mounted hook: "ReferenceError: EventBus is not defined"

下面是我的代码。

我在 app.js 上实现了这个

window.Vue = require('vue');
var EventBus = new Vue();

    Vue.component('transactionslist', require('./components/TransactionList.vue'));

    const app = new Vue({
        el: '#transaction',
        methods: {
            getTransactions: function () {
                $.getJSON("/guard/station/transactions?search=" + this.Search, function (_transactions) {
                    this.Transactions = JSON.parse(JSON.stringify(_transactions));
                }.bind(this));
            }
        },
        data() {
            return {
                Search: '',
                Transactions: [],
            }
        },
        mounted: function () {
            this.getTransactions();

        }
    });

这是我的 vue 组件 (TransactionList.vue)

<template>
    <table class="table table-hover transaction-list">
        <thead>
            <tr>
                <th class="fit">Transfer Code</th>
                <th>Orgin</th>
                <th>Destination</th>
                <th class="fit">Date Created</th>
            </tr>
        </thead>
        <tbody>
            <transactionRow @rowSelected="isSelectedRow" v-for="trans in data" :origin="trans.Origin" :destination="trans.Destination"
                :date="trans.created_at" :key="trans.TransferCode" :tscode="trans.TransferCode">
            </transactionRow>
        </tbody>
    </table>
</template>

<script>
    export default {
        props: ['data'],
        created() {
            this.transactions = this.$children;
        },
        data() {
            return {
                transactions: [],
                Transaction: []
            }
        },
        methods: {
            isSelectedRow: function (payload) {
                EventBus.$emit('showSelected', payload);
                this.transactions.forEach(transaction => {
                    transaction.isActive = (transaction.tscode == payload.tscode);
                });
            },
        }

    }
</script>

我使用 Laravel 开发应用程序，并使用 Laravel 功能之一，即 Laravel Mix。

Answer 1

只需使用这个:

window.EventBus = new Vue();