我有三个组成部分.
我没有任何影响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: [] …Run Code Online (Sandbox Code Playgroud) 我有在父组件中生成的事件,而子组件必须对其做出反应.我知道这不是推荐的方法vuejs2,我必须做一个$root非常糟糕的发射.所以我的代码是这样的.
<template>
<search></search>
<table class="table table-condensed table-hover table-striped" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<tbody id="trans-table">
<tr v-for="transaction in transactions" v-model="transactions">
<td v-for="item in transaction" v-html="item"></td>
</tr>
</tbody>
</table>
</template>
<script>
import Search from './Search.vue';
export default {
components: {
Search
},
data() {
return {
transactions: [],
currentPosition: 0
}
},
methods: {
loadMore() {
this.$root.$emit('loadMore', {
currentPosition: this.currentPosition
});
}
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
正如您所看到的那样loadMore,在无限滚动时触发,并且正在将事件发送到子组件搜索.不仅仅是搜索,而是因为它是根,它正在向所有人广播.
什么是更好的方法.我知道我应该使用道具,但我不知道在这种情况下我怎么能这样做.