总结
- 对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说,人嘛都会有苦恼的~
祝大家都有美好的未来,拿下满意的 offer。
我是A组件
//插入C组件
页面效果如下:
此时检查页面元素,我们会发现,在原本B组件中的位置,替换成了C组件:
//B.vue
我是B组件
//观察页面元素,被替换成C组件
也印证了开篇对插槽作用的解释,即使用的组件指定的位置留一个坑,如果在外部,使用其组件包裹某内容(可以是任何模板代码,也可以是HTML,还可以是组件),则该内容就会被分发到处(一个有趣的说法就是把“坑”补上),渲染出来。当然,也可以不放任何内容,不影响组件渲染,就好比最开始的情况。
注意:如果B组件的 template
中没有包含一个 <slot>
元素,即不使用插槽,则该组件起始标签和结束标签之间的任何内容都会被抛弃。例如:
//B.vue
我是B组件
//不使用插槽//A.vue
我是A组件
//此时在包裹的内容都会被抛弃
页面效果如下,在B组件中插入的C组件被抛弃了,因为B组件中没使用插槽:
后备(默认)内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。例如在B组件中:
我们可能希望这个B组件内绝大多数情况下都渲染文本“我是B组件”。为了将“我是B组件”作为后备内容,我们可以将它放在 <slot>
标签内:
我是B组件
现在当我在一个父级组件中使用B组件并且不提供任何插槽内容时:
后备内容“我是B组件”将会被渲染:
但是如果我们提供内容:
我是插槽内容
则这个提供的内容将会被渲染从而取代后备内容:
具名插槽
所谓具名插槽,顾名思义就是起了名字的插槽。有时我们需要多个插槽,例如当我们想使用某种通用模板:
对于这样的情况,<slot>
元素有一个特殊的 attribute:name
。这个 attribute 可以用来定义额外的插槽:
//B.vue
一个不带 name
的 <slot>
出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候,我们可以在一个 <template>
元素上使用 slot
指令,并以 slot
的参数的形式提供其名称(当然也可以直接放在标签中,如
我是A组件
我是header部分
我是main(默认插槽)部分
我是footer部分
现在 <template>
元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot
的 <template>
中的内容都会被视为默认插槽的内容。
页面效果如下:
观察页面元素,内容被放入相应名字的插槽中:
Tips:说到这里就不得不提一下,这种方式在项目中比较常用,可以当成一个复用(通用)模板组件。如多个组件的布局使用相似模板,只是具体内容不同,那么我们可以使用这种插槽方式封装成一个通用组件,在其他组件使用的时候只需要传对应的内容到对应名字的插槽即可,不需要将该模板在每个组件重新写一遍,减少代码冗余,大大提高开发效率。
作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的。现在,假设B组件:
我是B组件
{{obj.firstName}}
我们可能想换掉备用内容,用“lion”来显示。如下,在A组件:
我是A组件
{{obj.lastName}}
然而上述代码不会正常工作,因为只有B组件可以访问到 obj,而我们提供的内容是在父级渲染的,即在父级作用域中。页面并无变化:
为了让 obj在父级的插槽内容中可用,我们可以将 obj作为 <slot>
元素的一个 attribute 绑定上去:
我是B组件
{{obj.firstName}}
绑定在 <slot>
元素上的 attribute 被称为插槽 prop。现在在父级作用域中,我们可以使用带值的 slot-scope
来定义我们提供的插槽 prop 的名字:
我是A组件
{{data.obj.lastName}}
在这个例子中,我们选择将包含所有插槽 prop 的对象命名为 data,但你也可以使用任意你喜欢的名字。此时页面效果如下:
如果你有使用过ElementUI里面的表格el-table,当改变某一列展示的字段时,我们经常使用:
{{scope.row.xxx}}
插槽版本变化
v-slot
指令自 Vue 2.6.0 起被引入,提供更好的支持 slot
和 slot-scope
attribute 的 API 替代方案。v-slot
完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot
和 slot-scope
attribute 仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中。也就是说,在vue2版本中,我们仍可以使用slot跟slot-scope,但是在vue3中就只能使用v-slot了。
原来的带有slot的具名插槽
//B.vue
写法变化,使用v-slot
我是A组件
我是header部分
我是main(默认插槽)部分
我是footer部分
总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。