Vue.js前端开发实战（第2版） 课件 第4章 组件基础（下）.pptx

第4章组件基础（下）;学习目标/Target;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;动态组件;掌握动态组件的使用方法，能够实现动态组件的渲染;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;4.1.1定义动态组件;掌握KeepAlive组件的使用方法，能够使用KeepAlive标签完成组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;4.1.2利用KeepAlive组件实现组件缓存;掌握组件缓存相关的生命周期函数，能够在对应的生命周期函数中执行相应的动作;为什么需要设置组件缓存相关的生命周期函数？;;4.1.3组件缓存相关的生命周期函数;;修改src\components\MyRight.vue文件，在script标签中定义onActivated()和onDeactivated()生命周期函数。;保存上述代码后，在浏览器中访问:5173/，初始页面效果和控制台如下图所示。;单击“展示MyRight组件”按钮后的页面效果和控制台如下图所示。;单击“展示MyLeft组件”按钮后的页面效果和控制台如下图所示。;熟悉KeepAlive组件的常用属性，能够说明各个属性的作用;4.1.4KeepAlive组件的常用属性;4.1.4KeepAlive组件的常用属性;4.1.4KeepAlive组件的常用属性;4.1.4KeepAlive组件的常用属性;4.1.4KeepAlive组件的常用属性;保存上述代码后，在浏览器中访问:5173/，初始页面效果和控制台如下图所示。;单击“展示MyRight组件”按钮后的页面效果和控制台如下图所示。;单击“展示MyLeft组件”按钮后的页面效果和控制台如下图所示。;插槽;掌握什么是插槽，能够定义和使用插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;4.2.1什么是插槽;掌握具名插槽的使用方法，能够通过name属性定义具名插槽;什么是具名插槽？;;插槽通过slot标签来定义，slot标签有一个name属性，用于给各个插槽分配唯一的名称，以确定每一处要渲染的内容。添加name属性的slot标签可用来定义具名插槽。

定义具名插槽的语法格式如下。;在父组件中，如果要把内容填充到指定名称的插槽中，可以通过一个包含v-slot指令的template标签来实现，语法格式如下。;;;;保存上述代码后，在浏览器中访问:5173/，使用具名插槽的页面效果如下图所示。;掌握作用域插槽的使用方法，能够在父组件中使用子组件中的数据;什么是作用域插槽？;;1.定义数据;2.接收数据;在父组件中可以通过v-slot指令接收插槽中定义的数据，即接收作用域插槽对外提供的数据。通过v-slot指令接收到的数据可以在插槽内通过Mustache语法进行访问。

例如，在父组件中使用MyHeader组件中的插槽时，通过v-slot指令的值接收传递的数据的示例代码如下。;作用域插槽对外提供的数据对象可以使用解构赋值以简化数据的接收过程，示例代码如下。;4.2.3作用域插槽;4.2.3作用域插槽;4.2.3作用域插槽;;;;保存上述代码后，在浏览器中访问:5173/，作用域插槽的页面效果如下图所示。;自定义指令;了解什么是自定义指令，能够说出自定义指令的概念和分类;;Vue中的自定义指令分为两类，分别是私有自定义指令和全局自定义指令。

私有自定义指令是指在组件内部定义的指令。私有自定义指令可以在定义该指令的组件内部使用。例如，在