vue2如何二次封装表单控件如input, select等

需求

项目需要做一个城市选择器，数据来源公司的后端，要求用级联选择，使用的el-cascader

思路

二次封装要尽可能保留原有的组件prop，用法尽量保持和el-cascader一致，所以采用透传的方式传递prop

<template><div class="container" ><el-cascader:options="areaOptions"style="width: 100%"clearableref="cascader":value="value"@input="handleChange"v-on="$listeners"v-bind="$attrs"/></div>
</template>
<script>
import { findListByParentId } from '@/api/area/area'
export default {name: 'regionCascader',props: {value: {type: Array,default: () => []},disabledFunc: {// 这里是判断选项是否禁用的方法type: Function,default: (opts, level) => {return false}}},data() {return {options: []}},computed: {areaOptions() {const setOptions = (opts, level) => {return opts.map(opt => {if (opt?.children?.length) {opt.children = setOptions(opt.children, level + 1)}const param = {...opt,value: opt.id,label: opt.areaName,disabled: this.disabledFunc(opt, level)}return param})}return setOptions(this.options, 0)}},mounted() {this.getList()},methods: {handleChange(e) {this.$emit('input', e)},getList() {// 这里放获取数据的逻辑},getCheckedNodes() {return this.$refs.cascader.getCheckedNodes()}}
}
</script>
<style scoped>
.container{width: 100%;
}
</style>

后话

在VUE2中 2.6版本以后可以改为如下，去掉划线代码

在2.6版本以前，$attrs是不会获取到value字段，所以导致透传不进去，必须显示声明props.value