【备战春招】第八天+vue复习

学习课程：前端工程师2022版-vue基础入门

lesson20:使用插槽和具名插槽解决组件内容传递问题

1-9 使用插槽和具名插槽解决组件内容传递问题（1）-慕课网体系课 (imooc.com)

1-10 使用插槽和具名插槽解决组件内容传递问题（2）-慕课网体系课 (imooc.com)

作用域插槽

1-11 作用域插槽-慕课网体系课 (imooc.com)

lesson21：动态组件和异步组件

1-12 动态组件和异步组件-慕课网体系课 (imooc.com)

讲师：Dell老师

今天继续昨天的课程安排，学习了使用插槽和具名插槽解决组件内容传递问题、作用域插槽和动态组件和异步组件。

插插槽可以使组件的模版变得多样性，让用户在使用组件时可以自定义传入模版内容。

<slot>元素作为承载分发内容的出口，可以理解为一个占位符，或者说是子组件暴露的一个让父组件传入自定义内容的接口。插槽内可以包含任何模板代码，包括 HTML，甚至其他的组件。当组件内的内容是可变的，这个时候可以考虑使用插槽。

<slot>有三种类型，他们分别是：默认插槽 default、具名插槽 name、作用域插槽 v-slot

默认插槽是在自定义组件中使用<slot />标签进行占位，当我们使用该组件时，在组件标签内写入需要展示的具体内容。

具名插槽就是给<slot />标签加上 name 属性。语法：<my-component><slot name="插槽名字"/></my-component>。

有时候，我们在父组件使用插槽时需要访问子组件中的数据，这时候就需要使用作用域插槽。用法：将 data 变量名 作为 <slot> 元素的一个 attribute 绑定上去。

当使用插槽时父模板里调用的数据属性，使用的都是父模板里的数据；子模板里调用的数据属性，使用的都是子模板里的数据。

动态组件：根据数据的变化，结合component这个标签，来随时动态切换组件的显示。

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

异步组件：是异步执行某些组件的逻辑，这叫做异步组件。

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

继续加油！