Question

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

挂钩时出错：＆＃34; ReferenceError：未定义EventBus＆＃34;

我的代码如下。

我在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

请使用：

/Users/myname/Documents/Code/prizetime/assets/app/messages/messages.component.ngfactory doesn't exist
  .js
    Field 'browser' doesn't contain a valid alias configuration
    /Users/myname/Documents/Code/prizetime/assets/app/messages/messages.component.ngfactory.js doesn't exist
  .ts
    Field 'browser' doesn't contain a valid alias configuration
    /Users/myname/Documents/Code/prizetime/assets/app/messages/messages.component.ngfactory.ts doesn't exist
  as directory

Answer 2

您刚刚在app.js文件中定义了EventBus。

在TransactionList.vue组件中无法访问它，因为它没有引用EventBus

因此，将您的app.js中的EventBus导出为

export const EventBus = new Vue();

然后在组件脚本中导入EventBus

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

    }
</script>

请参阅es6 import和export

Answer 3

在自己的文件中创建事件总线：

// 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')
       }
    }
   ...
}

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

3 个答案: