Доступ переменной Event_Bus vue к однофайловому компоненту Vue.js - Laravel Mix

Я просто хочу спросить, как получить доступ к переменной в однофайловом компоненте vue? Когда я пытаюсь получить доступ к своему приложению в браузере, vue js приведет к ошибке.

Ошибка в подключенном хуке: «ReferenceError: EventBus не определен»

Мой код ниже.

Я реализую это на 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.


javascript vue.js laravel vuejs2 laravel-mix
person Kevin Loquencio    schedule 15.03.2018    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Просто используйте это:

window.EventBus = new Vue();
person Pavel    schedule 15.03.2018
comment
Привет! Итак, window - это глобальный объект для клиентской стороны, поэтому вы назначаете ему переменную и можете использовать ее на этой странице. подробнее - person Pavel; 16.03.2018

arrow_upward
2
arrow_downward

Вы только что определили EventBus в файле app.js.

Он недоступен в компоненте TransactionList.vue, поскольку не имеет ссылки на EventBus

Так что экспортируйте EventBus в свой app.js как

export const EventBus = new Vue();

А затем импортируйте EventBus в свой скрипт компонентов как

<script>
    import {EventBus} from './path/to/app.js'
    export default {

    }
</script>

См. Раздел es6 import и экспорт

person Vamsi Krishna    schedule 15.03.2018
comment
привет, сэр, я пробовал это, но во время компиляции npm будет ошибка. - person Kevin Loquencio; 16.03.2018

arrow_upward
1
arrow_downward

Создайте шину событий в собственном файле:

// bus.js
import Vue from 'vue'
const bus = new Vue()
export default bus

Импортируйте его в компоненты, в которых вы хотите его использовать:

import bus from 'bus'
export default { 
   ...
   methods: {
       myMethod () {
           bus.$emit('my-event', 'test')
       }
    }
   ...
}
person Community    schedule 15.03.2018