共计 900 个字符,预计需要花费 3 分钟才能阅读完成。
高阶组件就是 一个函数承受一个纯对象,并且返回一个新纯对象
高阶组件: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)
}
}
}
高阶组件应用:
<template>
<div>
<span @click="handleClick">props: {{test}}</span>
<slot name="slot1"/> <!-- 具名插槽 --></slot>
<p>===========</p>
<slot><slot/> <!-- 默认插槽 -->
</div>
</template>
<script>
export default {...}
</script>
<template>
<div>
<Base>
<h2 slot="slot1">BaseComponent slot</h2>
<p>default slot</p>
</Base>
<wrapBase>
<h2 slot="slot1">EnhancedComponent slot</h2>
<p>default slot</p>
</wrapBase>
</div>
</template>
<script>
import Base from './Base.vue'
import hoc from './Console.js'
const wrapBase = Console(Base)
export default {
components: {
Base,
wrapBase
}
}
</script>
正文完