1、父组件 index.vue

defineAsyncComponent 是 Vue3 的异步挂载

<template><div v-for="v in nav_items" :key="v.text"><son :nav_text="v.text" :nav_component="v.nav_component"></son></div>
</template><script setup>
import { defineAsyncComponent, reactive } from "vue";// 子组件
import son from "./son.vue";let nav_items = reactive([{'text': '文字','nav_component': defineAsyncComponent(() => import("@/components/grandson.vue")) // 孙组件}
])
</script>

2、子组件 son.vue

使用 is 动态引入组件，用法：

<component :is="grandson"></component>

最终会变成：

<grandson></grandson>

<template><div class="level1_item"><span class="level1_text">{{props.nav_text}}</span><!-- 动态引入组件 --><component :is="props.nav_component"></component></div>
</template><script setup>
import { defineProps } from "vue";// 父组件传入的 导航第一级 图片及文字
let props = defineProps({nav_text: {type: String,default: () => {return null;}},nav_component: {type: Object, // ⚠️注意是对象default: () => {return null;}},
})
</script>

3、孙组件 grandson.vue

<template><div>123</div>
</template><script setup></script><style lang="scss" scoped>
</style>

⚠️注意

若出现警告（如下图）：

Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.
Component that was made reactive: {name: 'AsyncComponentWrapper', __asyncLoader: ƒ, setup: ƒ}

解决方案：

在第1步父组件 index.vue 里引入 shallowRef ：

import { shallowRef } from "vue";

然后将 nav_component 修改为：

nav_component: shallowRef(defineAsyncComponent(() => import("@/components/grandson.vue")))

Vue3 父传子、使用 defineAsyncComponent 异步挂载组件、利用 is 动态引入组件相关推荐

vue3 父传子子传父
父传子 props接收数据 emit :子组件想使用父组件的方法 setup( props, { emit } ){ } index.vue(父组件) <CommonDialog v-if=& ...
vue3父传子，子传父
<template><div><p>我是父组件</p><p>111111111111111</p><headrt :inf ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
vue3之组件通信（props父传子，子传孙）（ts定义数组类型）
目录 vue3之组件通信 1 props父传子,子传孙 1-1 父组件 1-2 子组件 1-3 孙组件 2:父子传值 2:-1 父组件向子组件传值 Props 2-2 子组件向父组件传值 emit 3 ...
Vue3 - 组件通信（父传子）
前言在 Vue3 中,父组件向子组件传参的方法. 与 Vue2 相比,还是有一些区别的. 基础示例现在我们的需求是,要通过父组件,传递一个标题来让子组件显示. 子组件 Com.vue: <t ...
3.vue3.2的父传子defineProps，子传父emits以及ref
1.父传子 <template><div class="container"><!-- 传递数据这里传了一个string 和一个list --&g ...
【vue3.0学习】父传子子传父
父传子 <template><div id="app"><h1>父组件</h1><p>{{ money }}</p ...
Vue3.2——父传子、子传父
## 父传子父组件: <template><div class="home"><test-com :info="msg" tim ...

Vue3 父传子、使用 defineAsyncComponent 异步挂载组件、利用 is 动态引入组件

1、父组件 index.vue

2、子组件 son.vue

3、孙组件 grandson.vue

Vue3 父传子、使用 defineAsyncComponent 异步挂载组件、利用 is 动态引入组件相关推荐

最新文章

热门文章