Vue.js 异步组件传参

本文主要展示一下如何给异步组件进行参数传递：

通过 h 函数就可以啦

versions:

• vue@3.2.13

 

子组件 Async.vue

<template>
    <div>
        <span>异步注册组件:</span>
        <span>Props:{{ message }}</span>
    </div>
</template>

<script setup>
const props = defineProps({
    message: String,
});
</script>

父组件 App.vue

<template>
    <div>Hello world</div>
    <AsyncComponent></AsyncComponent>
</template>

<script setup>
import { defineAsyncComponent, h } from "vue";
import Async from "./components/Async.vue";
import Loading from "./components/Loading.vue";

const AsyncComponent = defineAsyncComponent({
    loader: () => {
        return new Promise((resolve) => {
            setTimeout(() => {
                const WithPropsAsync = h(Async, { message: "嘿嘿" });
                resolve(WithPropsAsync);
            }, 3000);
        });
    },
    loadingComponent: Loading,
});
</script>