我有三个部分.

Vue.js dev view

我对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的方法速记)

我怎样才能正确地做到这一点,而不从EditButton通过this.$parent.$parent改变Zonelist的状态?

推荐答案

Vue中的Non parent-child communication通常通过事件总线或状态管理系统进行处理.

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

window.bus = new Vue()

然后在你的EditButton,你可以emits 事件

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

在你的百分百里,你可以聆听它.

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

Vue.js相关问答推荐

正在try 访问vutify中v-select(ItemProps)的嵌套json值

在VITE-VUE APP-DEV模式上重定向HTTP请求

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

:deep() 带有嵌套 scss 规则的语法

如何容器化 Vue.js 应用程序?

VueJS:在组件之间使用全局对象的最佳实践?

确保在渲染组件之前加载 Vuex 状态

如何在 vue.js 构建中重命名 index.html?

如何修复跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应问题?

全局方法和实例方法有什么区别?

在 Vuejs 中计算 DOM 元素之间距离的最佳方法是什么?

删除一行后刷新 Bootstrap-Vue 表

如何从 v-for 创建的对象中绑定多个类?

'不提供名为'createRouter'的导出'' vue 3、vite 和 vue-router

VueJS错误避免直接改变props

如何从 Vuex 操作访问 Vuex 状态属性?

$emit 不会触发子事件

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新

v-bind:class 的 Vue.js 计算(computed)属性

Vuex 模块Mutations