继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

Niklause
关注TA
已关注
手记 21
粉丝 3
获赞 0

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

继续加油!

http://img2.sycdn.imooc.com/63eba45000014a5625601440.jpg

http://img4.sycdn.imooc.com/63eba4500001a4d325601440.jpg

http://img1.sycdn.imooc.com/63eba4500001e8e425601440.jpg

http://img1.sycdn.imooc.com/63eba45100011ee125601440.jpg

http://img1.sycdn.imooc.com/63eba4510001c27325601440.jpg

http://img1.sycdn.imooc.com/63eba45100017d5625601440.jpg

http://img3.sycdn.imooc.com/63eba4530001971825601440.jpg

http://img1.sycdn.imooc.com/63eba4530001598d25601440.jpg

http://img3.sycdn.imooc.com/63eba4530001883c25601440.jpg

http://img2.sycdn.imooc.com/63eba4540001affa25601440.jpg




打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP