Question

<template>
    <div>
        <AsyncComponent1></AsyncComponent1>
        <!-- Render AsyncComponent2 after AsyncComponent1 -->
        <AsyncComponent2></AsyncComponent2>
    </div>
</template>

<script>
export default {
    name: "My Component"
    components: {
        AsyncComponent1: () => import("./AsyncComponent1"),
        AsyncComponent2: () => import("./AsyncComponent2")
    }
};
</script>

我正在组件中异步加载两个组件，但是我需要其中一个组件在另一个组件之后进行渲染。我想知道那可能吗？

Answer 1

您可以让第一个组件发出一个事件，该事件由父级侦听并用于切换第二个组件

<template>
    <div>
        <AsyncComponent1 v-on:loaded="componentLoaded"></AsyncComponent1>
        <!-- Render AsyncComponent2 after AsyncComponent1 -->
        <AsyncComponent2 v-if="hasComponent"></AsyncComponent2>
    </div>
</template>

<script>
export default {
    name: "My Component",
    components: {
        AsyncComponent1: () => import("./AsyncComponent1"),
        AsyncComponent2: () => import("./AsyncComponent2")
    },
    data: {
        hasComponent: false
    },
    methods: {
        componentLoaded() {
            this.hasComponent = true;
        }
    }
};
</script>

然后在AsyncComponent1.vue中：

...
mounted() {
    this.$emit("loaded");
}
...

Answer 2

在其他组件的v-if中添加ref。

<template>
   <div>
       <AsyncComponent1 ref="c1"></AsyncComponent1>
       <!-- Render AsyncComponent2 after AsyncComponent1 -->
       <AsyncComponent2 v-if="$refs.c1"></AsyncComponent2>
   </div>
</template>

Vue异步组件回调

2 个答案: