使用Vue.js将信息从子组件传递到父组件

谢谢你阅读我的问题

我怀疑如何在我的Vue.js应用程序中实现这一点

父组件：App.vue 子组件：Loading.vue、ProductsList.vue、NoProductList.vue

应用程序组件是容器。加载页面时，将显示加载组件

然后加载组件检查产品。如果存在产品，加载组件将作为对象返回产品

如果没有任何产品，加载组件将返回null

如何根据加载组件返回值告诉应用程序组件要使用哪个组件？即。。如果有产品，则加载ProductsList组件；如果没有任何产品，则加载NoProduct组件

通知父组件它应该在Vue中使用哪个组件的正确方法是什么

我应该使用$emit（将数据从子级传递到父级）、状态管理还是总线组件

一些代码

正在加载.vue组件（子级）：

App.vue组件（父级）：

...

---

提前感谢。

对于亲子互动，正确的方法是让孩子

$emit

，让家长设置道具

---

状态管理和总线适用于更复杂的系统，其中数据必须由不密切相关的组件共享。

谢谢@Roy，明白了！

export default {
    name: 'loading',
    data () {
        return {
            message: ''
        }
    },
    mounted: function () {
        this.loadingProcess();
    },
    methods: {
        loadingProcess: function () {
        //process
        this.$emit('found-products', 'hola');
    }
}

<template>
    <div>
        <div id="resultComponent" @found-products="checkProductsList">
            <loading></loading>
            ...
        </div>
    </div>
</template>