学习课程：前端工程师2022版-vue基础入门
lesson20:使用插槽和具名插槽解决组件内容传递问题
1-9 使用插槽和具名插槽解决组件内容传递问题（1）-慕课网体系课 (imooc.com)
1-10 使用插槽和具名插槽解决组件内容传递问题（2）-慕课网体系课 (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 缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。
继续加油！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
