v-if
v-if能够销毁组件
动态组件:
内置的component组件结合je属性实现
动态组件的作用:同一个挂载点实现切换显示不同的组件
缓存组件 keep-alive
作用:可以将切换的组件包裹起来,进行缓存
被keep-alive组件缓存的组件会触发2个钩子函数:
activated:激活时触发(显示的时候)
deactivated:失去激活状态时触发(组件隐藏时触发)
插槽
就是vue内置的slot标签
使用:
1、封装的组件内:直接在封装组件的地方,需要动态设置标签结构的地方使用该插槽即可
2、使用组件:使用组件的时候直接向组件标签插入具体的标签结构
渲染结果:使用组件时传入标签结构会替换slot标签显示在页面中(solt其实就是一个占位符)
具名插槽
就是给slot标签添加name属性,那么这个插槽就叫做具名插槽
使用场景:当封装的组件需要用到(2个或者2个以上)的插槽的时候用到
使用:1、封装的组件内:直接在封装组件的地方需要动态设置标签结构的地方使用该插槽即可
2、使用组件时:通过template结合v-slot自定义的插槽名
(v-slot可以简写为“ # ”)
作用域插槽
就是当我们使用slot通过属性将子组件的变量传递给父组件使用,这个插槽就叫作用域插槽
使用:
1、<slot :row="子组件中变量"></slot>
2、使用组件时:<template v-slot="scope"> scope这个变量就包含着子组件传递过来的row属性<template>
小案例:使用作用域插槽封装表格组件
自定义组件
当vue内置指令不能满足需求的时候需要用到
全局注册:
Vue.directive(自定义指令名,{
inseted(el,bindind){
el:就是用指令时的标签
binding.value:指令传入的值
},
updata(el,binding){
}
})
局部注册:
directives:{
自定义指令名:{
inseted(el,binding){
el:就是用指令时的标签
binding.value:指令传入的值
},
update(el,binding){
}
}
}
\