相关疑难解决方法(0)

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

我有三个组成部分.

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: [] …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-component vuejs2

10
推荐指数
2
解决办法
5907
查看次数

从父组件到子组件的事件

我有在父组件中生成的事件,而子组件必须对其做出反应.我知道这不是推荐的方法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,在无限滚动时触发,并且正在将事件发送到子组件搜索.不仅仅是搜索,而是因为它是根,它正在向所有人广播.

什么是更好的方法.我知道我应该使用道具,但我不知道在这种情况下我怎么能这样做.

javascript vue.js vue-component vuejs2

4
推荐指数
1
解决办法
4304
查看次数

标签 统计

javascript ×2

vue-component ×2

vue.js ×2

vuejs2 ×2