今天学习Vue源码时,看到抽象组件,以前用过,但是不知道叫抽象组件
在Vue中,像<keep-alive>, <transition>,<slot>
这些都是内置的抽象组件,抽象组件和普通的组件类似,只是他们添加额外的行为,不向DOM呈现任何内容。有点像react中的高阶组件
当然我们也可以实现自己的抽象组件
首先实现抽象组件,不用设置template,否则Vue会优先渲染tempplate里面的东西,就不能额外添加行为了
实现自己的<debounce>
抽象组件
<script>
import {get,set,debounce} from 'lodash';
export default {
name:'debounce',
abstract:true,
render(){
//从$slots中获取子组件
let vnode = this.$slots.default[0]
console.log(vnode)
if(vnode){
let event = get(vnode,'data.on.click')
if(typeof event === 'function'){
set(vnode,"data.on.click",debounce(event,1000))
}
//如果有DOM的操作,必须是在$nextTick中操作,因为在$nextTick中真是的DOM才能获取到
this.$nextTick(function(){
console.log(vnode.elm)
set(vnode,'elm.style.backgroundColor','red')
})
}
return vnode;
}
};
</script>
创建好组件后,使用的时候,和普通组价一样的使用方法
局部使用
也可以全局注册使用,利用Vue.component()方法注册
效果: