Vue3 coderwhy学习笔记 13 动态组件

动态组件

1. component组件，通过is属性动态显示组件

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

2.可以正常传值

keep-alive

1. 作用：保留组件状态
2. 使用: 包裹组件即可
3. include属性，//匹配到对应的组件才会保留 include="a,b" include="/a|b/" //正则表达式，a或b include="['a','b']"
4. exclude: //匹配到的不保留
5. max：number //最大保留几个

import 异步组件

- import("../../xx").then((res) => {//会被分包
-     console.log(res)
- })

Vue3 提供函数实现异步组件 defineAsyncComponent

1. 第一种写法

- import { defineAsyncComponent } from 'vue';
- const AsyncCategory = defineAsyncComponent(() => import("../xx.vue"))

2. 第二种写法 import { defineAsyncComponent } from 'vue'; const AsyncCategory = defineAsyncComponent({ loader: () => import("../xx.vue"), loadingComponent: loading //自己写一个占位组件 })

Vue3提供异步组件

• 没加载default时，先显示fallback，可以分包
• 使用方法

- <suspense>
-     <template #default> //插槽
-         <async-category></async-category>
-     </template>
-     <template #fallback>
-         <loading></loading>
-     </template>
- </suspense>

$refs的使用

• 通过绑定ref进行操作，可给元素、组件绑定ref
• 通过this.$refs.xxx拿到属性，或者组件中的值

parent,root获取父组件和根组件

- this.$parent/$root  //很少用 ，$children已经移除Vue3

生命周期的destoryed替换成unmounted