前言
react一直尽量绕开mixin而推荐使用高阶组件，对于vue来说高阶组件不太常用，这和react与vue的实现有关联。react函数即组件，虽然vue组件的最终表现也是函数，但是在vue组件未注册时其实还是对象。本期我们将利用vue中不常用的高阶组件，来实现简单的组件配置化。
一、vue高阶组件
vue中高阶组件的概念与高阶函数类似，即输入一个或多个组件，输出另一个组件。vue在组件没有注册时，是没有构造函数的，本质上就是一个对象，那么上面的高阶组件就简化为输入一个或多个对象，输出另一个对象。简单结构如下：
function(comA, comB) {
return {
props: {},
computed: {},
data: {},
methods: {},
render(h) {
h('div', null, [
h(comA, {
props:{},
attrs:{},
on: {},
style: {},
scopedSlots: {}
}, slots),
h(comB, {
props:{},
attrs:{},
on: {},
style: {},
scopedSlots: {}
}, slots)
])
}
}
}
二、实现
下面我们就以此为基础实现组件的配置化
高阶组件
注意的点
在封装高阶组件时，需要注意以下几点：
1.透传事件监听
input和change事件我们需要自定义，因为需要修改绑定的值，之后再手动emit出去即可
2.插槽的处理
如果针对单个组件，我们直接通过this.$slots透传即可，但本次实现是涉及多个组件，我们需要区分不同的slots分别传递给不同组件
我们可以通过传入插槽时，添加额外的属性加以判断即可（注意：额外的元素需加在实体元素上，不能放在template标签上），没有添加额外属性的slots会被判断为给最外层div使用的插槽，用于设置标题等。
另外要特别注意的点是：在传递插槽给相应的组件时，需要注意插槽的上下文，这是因为vue源码是强判断 this.$vnode.context === this.$vnode.componentOptions.children[0].context，如果父组件slot的上下文与当前高阶组件不一致，就会导致渲染不出来，这里通过将插槽的context处理为当前高阶组件实例即可，所以下面加了slot.context = this._self的逻辑。
作用域插槽相对于具名插槽就更简单了，我们将组件名称与插槽名称组合作为传入的作用域插槽名称，通过是否包含当前组件名称，获取当前组件的作用域插槽。
我们在处理渲染的节点时，将props传入的config配置内容作为不同组件的属性透传，绑定值都通过传入的model以及config中的prop确定，从而通过change和input修改；on透传处理后的listeners，scopedSlots透传处理后的scopedSlots，slots也透传上述规则处理后的slots，最后返回渲染渲染函数包裹的节点。
export default function getHOC(comMap) {
const ignoreArr = ['change', 'input']
return {
computed: {
// 过滤掉input和change事件监听
listeners() {
const res = {}
for(let key in this.$listeners) {
if(!ignoreArr.includes(key)) {
res[key] = this.$listeners[key]
}
}
return res
},
// 处理插槽
slotsMap() {
const tempSlotsMap = Object.keys(this.$slots)
.reduce((arr, cc) => {
const slot = this.$slots[cc][0]
const type = slot.data.attrs.comType || 'default'
if(!arr[type]) {
arr[type] = []
}
slot.context = this._self
arr[type].push(slot)
return arr
}, {})
return tempSlotsMap
}
},
methods: {
// 处理scopedSlot插槽
handleScopeSlots(slots, name) {
let slotsMap = {}
for(let key in slots) {
const res = key.split('_')
if(res[0]===name) {
slotsMap[res[1]]=slots[key]
}
}
return slotsMap
},
// 处理渲染dom
handleNodes(h) {
const { config, model } = this.$attrs || {}
let hArr = []
for(let key in comMap) {
const slots = this.slotsMap[key]
const scopedSlots = this.handleScopeSlots(this.$scopedSlots, key)
hArr = [...hArr, h(comMap[key], {
props: {
value: model ? model[config?.[key]?.prop] : '',
...(this.$props?.config?.[key] || {}),
...config[key]
},
attrs: {
key: `${key}-${config[key].prop}`,
...config[key],
},
on: {
change: (v) => {
model[config?.[key]?.prop] = v
this.$emit('change', {prop: config[key].prop, v})
},
input: (v) => {
model[config?.[key]?.prop] = v
this.$emit('input', {prop: config[key].prop, v})
},
...this.listeners
},
style: {
marginBottom: '10px',
maxWidth: '300px',
...(config?.[key]?.style || {})
},
scopedSlots: scopedSlots
}, slots || null)]
}
return hArr
}
},
render(h) {
const nodes = this.handleNodes(h)
return h('div', null, [
h('div', null, this.slotsMap.default),
...nodes
])
}
}
}
高阶组件的使用
这里配置化通过config实现，但也没有完全配置，插槽还是在组件内使用的。不过这里没有放到配置文件中的事件其实是可以配置化的，通过额外的在config中添加event字段，用于将事件方法传递给相应的组件即可，小伙伴可以尝试下哦~
这里给input输入框传入了prefix插槽，通过comType额外的属性确定是哪个组件使用；autocomplete传入了作用域插槽；高阶组件中的div标签传入了header插槽，用于设置标题；其次，高阶组件使用时，我们还用了自定义的MySelect组件。
<template>
<div>
<Hoc
:model="data"
:config="config"
@input="input"
@change="change"
@blur="blur"
@select="handleSelect"
>
<template>
<h2 slot="header" style="padding-bottom: 20px;">我是高阶组件</h2>
</template>
<template>
<i slot="prefix" class="el-icon-date" style="margin-top: 13px;" comType="input"></i>
</template>
<template slot="autocomplete_default" slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
<span class="addr">{{ item.address }}</span>
</template>
</Hoc>
<div>{{data}}</div>
</div>
</template>
<script>
import getHOC from '../components/hoc'
import MySelect from '../components/select.vue'
import { Input, Switch, rate, Autocomplete } from 'element-ui'
const Hoc = getHOC({input: Input, mySelect: MySelect, switch: Switch, rate, autocomplete: Autocomplete})
export default {
components: {
Hoc,
},
data() {
return {
data: {
inputValue: '',
autocompleteValue: '',
selectValue: '',
switchValue: false,
rateValue: 0
},
config: {
input: {
prop: 'inputValue',
placeholder:'我是输入框',
style: {},
},
autocomplete: {
prop: 'autocompleteValue',
placeholder: '请输入内容',
fetchSuggestions: this.querySearch
},
mySelect: {
prop: 'selectValue',
placeholder: '请选择',
list: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}]
},
switch: {
prop: 'switchValue',
activeColor: "#13ce66",
inactiveColor: "#ff4949"
},
rate: {
prop: 'rateValue'
},
restaurants: []
}
}
},
mounted() {
this.restaurants = this.loadAll();
},
methods: {
change(v) {
console.log('v: ', v);
},
input(v) {
console.log('v222: ', v)
},
blur(e) {
console.log('event: ', e)
},
handleSelect(item) {
console.log('item: ', item);
},
querySearch(queryString, cb) {
const restaurants = this.restaurants;
const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
loadAll() {
return [
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
]
}
}
}
</script>
效果
三、总结
以上我们就简单利用高阶组件实现了组件的配置化。
其实react与vue在高阶组件上的使用区别主要是体现在 React 中写组件就是在写函数，函数拥有的功能组件都有。而 Vue 更像是高度封装的函数，在更高的层面 Vue 能够让你轻松的完成一些事情，但与高度的封装相对的就是损失一定的灵活，你需要按照一定规则才能使系统更好地运行。
以上组件配置化如果在外面包一层表单的话，实用性就更强一些了，可以实现表单的配置化，这样写表单就更加方便写。当然在高阶组件中也可以用jsx的语法来写，但是需要是将传入的组件注册一下才能使用；h函数也可以按标签的字符串名称渲染，这同样需要全局注册一次组件，否则它并不知道你要渲染的是什么组件，而这里，我们直接按传入组件对象即可，h函数帮我们渲染相应的节点。
下期预告
下一期，我们可以用react来实现一次高阶组件，与vue对比学习，可以加深我们对它们设计理念不同的理解~
