- 什么是动态组件,如何使用动态组件,如何切换
在同一个挂载点,可以切换显示不同组件。vue内置的component组件,配合is属性。只要改变is属性的值,变为要显示的组件名即可
- 组件缓存
vue内置的keep-alive组件把要缓存的组件包起来,这要不会频繁的创建和销毁组件,页面更快呈现。通过组件的activated和deactivated来判断组件的存活状态
- 组件插槽
当组件内某一部分标签不确定时,可以使用插槽技术。先在组件内使用slot占位,使用组件时传入具体标签。传入的标签会替换掉slot显示。当我们在slot标签内写好默认要显示的内容,如果我们没有给组件传入具体标签或者内容,就会显示默认内容
- 具名插槽
当我们组件内有多处不确定的标签,用slot占位,给name属性起名字来区分。并且用template配个v-slot:name 分发要替换的标签
- 作用域插槽
当我们使用插槽时需要用到子组件内变量,此时需要用到作用域插槽。可以让组件更加灵活的使用于不同的场景和项目
- 自定义指令
当vue内置指令满足不了需求时,可以自己定义使用。
- vue中slot使用方法以及作用域插槽的用法
使用方式:当组件当做标签进行使用的时候,用slot可以用来接受组件标签包裹的内容,当给solt标签添加name属性的 时候,可以调换响应的位置
(高级用法) 插槽作用域: 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
// current-user组件, user属性和值, 绑定给slotProps上
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
- 与Keep-alive有关的生命周期是哪些
在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染
activated钩子:在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用
Activated钩子调用时机:第一次进入缓存路由/组件,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用,并且给因为组件被缓存了,再次进入缓存路由、组件时,不会触发这些钩子函数,beforeCreate created beforeMount mounted 都不会触发。
deactivated钩子:组件被停用(离开路由)时调用。
deactivated钩子调用时机**:使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了,这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
- 自定义指令的方法有哪些?它有哪些钩子函数?
全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding
- 组件is的特性如何使用
1)动态组件< component :is=“componentName”>< /component>, componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。
2) 有些HTML元素,诸如 < ul >、< ol >、< table >和< select >,对于哪些元素可以出现在其内部是有严格限制的。 而有些HTML元素,诸如 < li >、< tr > 和 < option >,只能出现在其它某些特定的元素内部。