vue高阶组件
高阶组件就是 一个函数接受一个纯对象，并且返回一个新纯对象
高阶组件：console.js
function Console (Base) {
return {
mounted () {
console.log('haha')
},
props: Base.props,
render (h) {
const slots = Object.keys(this.$slots)
.reduce((arr, key) => arr.concat(this.$slots[key]), [])
// 手动更正 context
.map(vnode => {
vnode.context = this._self //绑定到高阶组件上
return vnode
})
return h(WrappedComponent, {
on: this.$listeners,
props: this.$props,
attrs: this.$attrs
}, slots)
}
}
}高阶组件使用：
props: {{test}}===========
EnhancedComponent slotdefault slot
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- 动态组件与v-once指令
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- (六)Component初识组件
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)