Question

感谢您阅读我的问题。

我怀疑如何在我的Vue.js应用程序中完成此任务。

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

App组件是容器。页面加载时，将显示“加载”组件。

然后，Loading组件会检查产品。如果有产品，则Loading组件会将产品作为对象返回。

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

如何根据加载组件返回值告诉App组件使用哪个组件？ ie ..如果有产品，则加载ProductsList组件，如果没有产品，则加载NoProduct组件？

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

我应该使用$ emit（从子节点传递数据到父节点），状态管理https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch还是总线组件？

一些代码......

Loading.vue组件（子）：

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

App.vue组件（父级）：

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

提前致谢。

Answer 1

对于亲子互动，正确的方法是让孩子$emit和父母设置道具。

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

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

1 个答案: