从父组件到子组件的事件-Java 学习之路

我有父组件中生成的事件，孩子必须对它做出反应 . 我知道这不是 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>

如您所见， loadMore 在无限滚动时被触发，事件被发送到子组件搜索 . 不仅仅是搜索，而是因为它正在向所有人播放 .

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

1 回答

只需要一个变量（称之为 moreLoaded ），每次调用 loadMore 时都会增加 . 将它和 currentPosition 传递给您的 search 组件作为道具 . 在搜索中，您可以 watch moreLoaded 并相应地采取措施 .

Update
哈克？我的解决方案嗯，我从来没有！ ;）

你也可以使用localized event bus . 设置如下：

export default {
    components: {
        Search
    },
    data() {
        return {
            bus: new Vue(),
            transactions: [], 
            currentPosition: 0 
        }
    },
    methods: {
        loadMore() {
            this.bus.$emit('loadMore', {
                currentPosition: this.currentPosition
            });
        }
    }
}

并将其传递给搜索：

<search :bus="bus"></search>

这将是 bus 作为道具（当然），并有一个类似的部分

created() {
    this.bus.$on('loadMore', (args) => {
        // do something with args.currentPosition
    });
}

回复于 2024-05-15T16:13:07+08:00

从父组件到子组件的事件

1 回答

相关问题