Javascript 扩展Vue组件会导致多个GET调用

我有一个基本的Vue组件，用于处理项目。现在我用一个CompanyItem和一个EducationItem扩展了这个组件。但当我加载这两个指令时，它将调用GET方法4次。另外：我在两个模型（例如：openUpdateOrCreateModal（））上有一个click处理程序，它加载在一个指令中。单击时，也会触发另一个指令。有人有主意吗

基础 教育类 公司 HTML

什么在监听

索引

事件，它在接收到该事件时做了什么？什么意思？您在

挂载

中发出此事件<代码>总线。$emit（'index'）。你在听什么？我解决了这个问题，不应该使用总线，只使用这个。方法（）；什么在监听

索引

事件，当它接收到它时做什么？你的意思是什么？你在

挂载

中发出此事件<代码>总线。$emit（'index'）。你在听什么？我解决了这个问题，不应该使用总线，只使用这个。方法（）；

module.exports = {
    props: ['user', 'update_url', 'store_url', 'delete_url', 'show_url', 'index_url', 'item_type'],

    mounted() {
        Bus.$emit('index');
    },
    data(){
        return {
            form: {},
            items: [],
            mainItem: {},
            item: {},
        }

    },
    created(){

    },
    methods: {
        resetForm(){
            this.form = new SparkForm({
                general: {
                    title: null,
                },
                item: this.getItemProperties(),
                address: {
                    address_line_1: null,
                    address_line_2: null,
                    city: null,
                    province: null,
                    zip_code: null
                }
            });


            this.mainItem = null;

        },
        getItemProperties(){
            return {};
        },

        showModal(){
            $('#create-update-'+this.item_type+'-modal').modal('show');
        },
        hideModal(){
            $('#create-update-'+this.item_type+'-modal').modal('hide');
        },

        /**
         * Gets a list with specific items
         */
        index(){
            console.log('Call index');
            axios.get(this.index_url)
                .then(response =>
                {
                    this.items = response.data.data;
                });
        },
    }
};

var base = require('./cv-item-base');
Vue.component('cv-educations-management', {
    mixins: [base],
    methods: {
        getItemProperties(){
            return {
                start_at: null,
                end_at: null,
                description: null,
                finished_education: null,
                level: null,
            }
        }
    }
});

var base = require('./cv-item-base');
Vue.component('cv-company-list', {
    mixins: [base],
    methods: {
        getItemProperties(){
            return {
                start_at: null,
                end_at: null,
                position: null,
                description: null,
                phone_number: null,
                branch: null,
                referral: null,
            }
        }
    }
});

<cv-company-management :user="user"
                       :update_url="'{{route('application.manage.companies.update')}}'"
                       :show_url="'{{route('application.manage.companies.show')}}'"
                       :delete_url="'{{route('application.manage.companies.destroy')}}'"
                       :store_url="'{{route('application.manage.companies.store')}}'"
                       :index_url="'{{route('application.manage.companies.index')}}'"
                       :item_type="'company'"
                       inline-template>

</cv-company-management>



<cv-education-management :user="user"
                       :update_url="'{{route('application.manage.educations.update')}}'"
                       :show_url="'{{route('application.manage.educations.show')}}'"
                       :delete_url="'{{route('application.manage.educations.destroy')}}'"
                       :store_url="'{{route('application.manage.educations.store')}}'"
                       :index_url="'{{route('application.manage.educations.index')}}'"
                       :item_type="'education'"
                       inline-template>

    </cv-education-management>