Eu tenho um evento que é gerado no componente pai e o filho precisa reagir a ele. Eu sei que essa abordagem não é recomendada emvuejs2 e eu tenho que fazer uma$root emitir o que é muito ruim. Então, meu código é esse.

<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>

Como você pode verloadMore é acionado em rolagem infinita e o evento está sendo enviado para a pesquisa de componentes filho. Bem, não apenas a pesquisa, mas como a raiz está sendo transmitida para todos.

Qual é a melhor abordagem para isso. Eu sei que devo usar adereços, mas não sei como posso fazer isso nessa situação.