=======================
应用场景:
项目中有很多地方需要调用一个组件,比如弹窗,但是内容又不固定,有个可能弹出是表格,有的可能弹出是照片,这个决定于需要调用这个子组件的父组件,这种情况下就可以在自组建(这个弹窗中)使用slot,占坑,slot的HTML元素和内容,完全取决于使用他的父组件给他传了啥。
作用:
子组件a.vue中slot标签的作用实际上就是占坑,站着位置,等待使用a.vue的父组件 content 时候,content的全部内容(包括文字、html元素)全部替代a.vue中设置的位置。
分类
–
一、单个slot(基本用法)
用法:
1、子组件中
//子组件child.vue中内容
首页
//这里是子组件中固定部分,没用slot非固定部分 //这里是使用了slot部分,不固定,如果有给他传东西了,就会被替代,不传
则保留
2、父组件中
首先要把这个子组件注册到父组件中,具体省略,注册完后,子组件就可以当做一个标签使用。
花花花花花 //child标签之间的内容,不管是HTML元素还是文字都会全部替代
child.vue中 slot标签中的内容
3、结果
二、多个slot(具名插槽)
使用场景:
同一个组件,不同位置需要放置不同内容,比如有题目,文字,图片组合,那就可以设置多个slot,分别占坑,每个slot设置个名字,然后使用时候根据名字找到对应的slot,替换内容。
使用步骤:
1、子组件中定义多个插槽,以name属性区分
标题:
内容:
文字:
默认:
2、父组件中以template标签引入,并使用v-slot(v-slot 缩写为字符 #)绑定相应插槽的name属性作为区分
我是标题
我是内容
我是文字
//default指向的是不带name属性的slot
我是默认插槽
3、结果:
三、作用域插槽(子组件向父组件传值)
使用场景:
结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。