15《Vue 入门教程》Vue 动态组件 & keep-alive

本小节我们将介绍 Vue 的动态组件，以及缓存 keep-alive 的使用。包括动态组件的使用方法，以及如何使用 keep-alive 实现组件的缓存效果。

动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是 Vue 的一个高级用法，但其实它的使用非常简单。keep-alive 是 vue 的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染 DOM。

通过使用保留的 元素，动态地把组件名称绑定到它的is特性，可以实现动态组件：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2 行，我们使用动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行，我们定义了组件 ComponentA、ComponentB、ComponentC。

最终的实现效果是：当点击按钮的时候会动态切换展示的组件。

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被keep-alive缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。

keep-alive的用法相对简单，直接使用keep-alive包裹需要缓存的组件即可：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行，我们定义了组件 ComponentA、ComponentB、ComponentC，分别定义了他们的 created 和 beforeDestroy 事件。

之前我们介绍过， keep-alive缓存的组件只有在初次渲染时才会被创建。所以，我们通过修改 currentView 切换组件时，组件的 beforeDestroy 事件不会触发。若该组件是第一次渲染，会触发 created 事件，当再次切换显示该组件时，created 事件不会再次触发。

activated 和 deactivated 和我们之前学习的生命周期函数一样，也是组件的生命周期函数。不过，activated和deactivated只在 内的所有嵌套组件中触发。 activated ：进入组件时触发。 deactivated ：退出组件时触发。

示例代码：

实例演示

"运行案例" 可查看在线运行效果

代码解释： JS 代码中，我们定义了组件 ComponentA、ComponentB，并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行，我们定义了两个按钮，通过点击按钮切换 currentView 的值。当我们切换组件显示时，可以看到这样的打印信息：

include和exclude是 keep-alive 的两个属性，允许组件有条件地缓存。 include： 可以是字符串或正则表达式，用来表示只有名称匹配的组件会被缓存。 exclude： 可以是字符串或正则表达式，用来表示名称匹配的组件不会被缓存。

示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA，ComponentB。 在之前的小节我们了解到keep-alive缓存的组件只有在初次渲染时才会被创建。所以，在案例中，组件 ComponentA 和 ComponentB 的 created 函数只有在第一次组件被创建的时候才会触发，而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA，ComponentB。

本节，我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点：

在图1中，有一个button-group，如果我们想让他保持一定的状态，即点击'3日'后，下方出现相应的图标，这个'3日'的button一直保持亮度。该如何做呢？

在图2中，我们发现，element-ui给定的button type其实有很多的，只要在我们点击处罚button的事件的同时，修改button的type就行了。

在vue中，有一个很方便的dom方法，就是ref

我们给每个button一个特定的ref值。需要修改的时候，我们在这个button的时间里，给每个button的type一个特定值就行了。

如果，这样，我们就能观察到确实修改了button的type属性并且有效果，但是打开浏览器的console(F12)我们就会发现，出现了很多报错：

报错的内容根据字面含义可以知道，如果我们修改这个type的话，父组件也会发生变动。这个方法并不成立。同时，报错的内容里面，给我们提供了修改的方法，就是用data或者computed来保存一个临时的属性。

HTML:

JS:

这样，就没有错误了。

1.使用ref修改

$refs:

在Vue中，父组件可以通过 $refs来管理通过ref注册过的所有子组件，即 $refs对象下可以包含很多 $ref对象.

创建两个组件分别是父组件：aaa.vue 子组件：bbb.vue

父组件 *** 作（aaa.vue）

在子组件上添加ref=“child”命名。

给按钮添加一个方法，

方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据中的dlshow内容。

方法内使用this.$refs.child.dlff(1)给子组件的dlff方法传递参数1

/*父组件*/

登录一下吧

子组件 *** 作（bbb.vue）

2.使用props传递父传子

props是通过父组件值扔给给子组件，子组件使用props来接住值！

父组件 *** 作（aaa.vue）

给子组件使用v-bind传过来的键名和它的值:shuju=“dlshow”

在data中定义对应的dlshow

/*父组件*/

登录一下吧

子组件 *** 作（bbb.vue）

使用props接收父组件扔过来的key键和参数类型。

原文链接：https://blog.csdn.net/m0_57146100/article/details/119617880

---