具有自定义功能的 HeaderComponent

Question

我想知道如何使用自定义功能（例如排序除外）实现CustomHeader。 基本上我想知道的是如何将我的 HeaderComponent 与保存网格的组件进行通信。例如：

<template>
    <div style="height: 100%" class="table-chart" ref="root">

        <div class="title" ref="title">{{ objectData.title }}</div>

        <div class="ag-dashboard" style="height: 100%; width: 90%; margin: 0 auto">
            <ag-grid-vue
                :style="{ height: tableHeight }"
                :gridOptions="gridOptions"
                :columnDefs="columnDefs"
                :rowData="rowData"
             />
        </div>
    </div>
</template>
<script>
export default {
    components: {
        'HeaderComponent': {
            template: '<span>{{this.params.displayName}} <span @click="custom">CLICK</span></span>',
            methods: {
                custom() {
                    // emmit an event here or find a way to comunnicate with the function "customEvent" below
                }
            }
        }
    },
    methods: {
        customEvent() {
             console.log('Event from header');
        }
    },
    beforeMount() {
        // ... setup Ag-Grid and the HeaderComponent in the columns' headerComponentFramework
    }
}
</script>

感谢任何帮助，

Answer 1

我发现这样做的更简洁的方法是通过EventBus：

import Vue from 'vue';
const EventBus = new Vue();

export default {
    //...
    'HeaderComponent': {
        // ...
        methods: {
            custom() {
                 EventBus.$emit('customEvent');
            }
        }
     // ...
     mounted() {
         EventBus.$on('customEvent', () => {
             // Do whatever...
         });
     }
}