如何在组件链中传播Vue.js事件？

Question

我有三个组成部分.

我没有任何影响Datatable组件导致我从npm得到它.

现在我想发一个活动EditButton给我Zonelist.

Zonelist 零件:

<template>
<datatable :columns="table_columns" :data="table_rows" filterable paginate v-on:remove="removeItem"></datatable>
</template>
<script>
import datatable from 'vuejs-datatable';
import moment from 'moment';
export default {
    data() {
        return {
            table_columns: [
                {label: "Zone", component: 'ZoneLink'},
                {label: "Last updated", callback (row) {
                    let locale = $('html').closest('[lang]').attr('lang') || 'en';
                    moment.locale(locale);
                    return moment(row.last_updated).format('D. MMM YYYY');
                }},
                {label: '', component: 'EditButton'}
            ],
            table_rows: [
                {
                    "name": "xyz.de",
                    "last_updated": "2017-10-21 17:29:50"
                }
            ],
            form: {
                name: '',
                errors: []
            }
        };
    },
    components: {
        datatable
    },
    methods: {
            removeItem (item) {
                this.table_rows.forEach((value, index, array) => {
                    if (value.name === item) {
                        Vue.delete(array, index);
                    }
                });
            }
      }
}
</script>

现在我的EditButton组件$emit()是remove带参数的事件.

但没有任何反应.所以我认为vue无法找到听众.

(我在这里使用ES6的方法缩写)

我怎么能做到这一点不正常变异Zonelist威盛的状态this.$parent.$parent从EditButton？

Answer 1

Vue中的非父子通信通常通过事件总线或状态管理系统来处理.

在这种情况下,除非您的应用程序更复杂,否则事件总线可能就是您所需要的.由于您使用的是单个文件组件,因此可能需要在窗口中声明总线,可能在主脚本中.

window.bus = new Vue()

然后在你的EditButton,你可以发出事件

bus.$emit('some-event', someData)

而在你的ZoneList你可以听取它.

bus.$on('some-event', someData => this.doSomething(someData))

Answer 2

另一种选择是通过DataTable向其添加v:on="$listeners"属性来要求传递任何和所有事件。

有关更详细的说明，请参阅/sf/answers/4293048511/。

编辑：

一个更安全的选择是简单地侦听父类中的事件并将其传递......

    <ancestor @message="console.log($event)"> <!-- cute trick see * -->
    ...
    <parent @message="$emit('message', $event)"> <!-- passes it on -->
    ...
    <child @click="$emit('Hello World')"> <!-- creates the event -->

* computed: {'console' : () => console}