<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>
我正在组件中异步加载两个组件,但是我需要一个组件在另一个组件之后进行渲染。我想知道那可能吗?
最佳答案
将v-if
添加到其他组件中的ref
中。
<template>
<div>
<AsyncComponent1 ref="c1"></AsyncComponent1>
<!-- Render AsyncComponent2 after AsyncComponent1 -->
<AsyncComponent2 v-if="$refs.c1"></AsyncComponent2>
</div>
</template>