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

我没有对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方法速记）

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

来源

2017-04-22 jankal

Non parent-child communication Vue通常通过事件总线或状态管理系统来处理。

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

window.bus = new Vue()

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

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

而在你ZoneList你可以听它。

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

来源

2017-04-22 17:19:42 Bert

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

回答

相关问题