学习课程:前端工程师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 缓存的组件只有在初次渲染时才会被创建,并且当组件切换时不会被销毁。
继续加油!