开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 25 天，点击查看活动详情

说点题外话

上一篇说了动态组件的基本使用，只是涉及了数据的基本展示，这一篇我将说说动态组件如果传递参数，毕竟在日常开发中会传递参数的组件才是我们最常见的组件。

说正文

1. 使用component

App.vue

<template>
  <div>
   <component :is="currentTab" :name="name"></component>
  </div>
</template>

<script>
import Home from './Home.vue';
export default {
  components: { Home },
  data() {
    return {
      currentTab: "Home",
      name: "小白"
    }
  }
}
</script>

Home.vue

<template>
  <div>
    <h2>Home组件-传递的参数: {{ name }}</h2>
  </div>
</template>

<script>
export default {
  props: {
   name: String
  }
}
</script>

其实component这种方式传参和父子组件通信很像，只不过这里父组件传递的参数写在了<component><component>标签中了。

2. keep-alive的其他参数

keep-alive是一个内置组件，它可以用来缓存和保留动态组件或者router-view组件的状态，以避免重复渲染和销毁。这可以提高应用程序的性能和响应速度。

上一篇说到了keep-alive会默认对组件进行保存，我们可以手动改变key的属性值完成强制刷新。这里再说说怎么自己设置是否缓存组件？具体缓存哪些我们想要的组件？

这就涉及了三个参数：

include：String | RegExp | Array 只有名称匹配的组件会被缓存
exclude: String | RegExp | Array 任何名称匹配的组件都不会被缓存
max：Number | String 最多可以缓存的组件实例，一旦超出这个数字，那么缓存中最近没有被访问的组件实例就会被销毁

我拿include演示一个案例，我们指向针对Home组件和About组件进行缓存

<keep-alive include="home,about"></keep-alive>

这里展示的是字符串的写法，其实还有两种其他写法，正则和数组形式

正则写法

<keep-alive :include="/home|about/"></keep-alive>

数组写法

<keep-alive :include="['home', 'about']"></keep-alive>

这个name属性就是用来和keep-alive中的属性进行匹配用的

和vue3和解的Day25--动态组件

说点题外话

说正文

1. 使用component

2. keep-alive的其他参数

结束