UI组件二次封装继承原组件的所有属性事件和插槽

UI组件二次封装继承原组件的所有属性事件和插槽

使用属性:
$attrs和$listeners

父组件

<template>
    <a-input v-bind="$attrs" v-on="$listeners" ref="ipt">
        <template v-for="(value,name) in $slots" #[name]="slotData">
            <slot :name="name" v-bind="slotData"></slot>
        </template>
    </a-input>
</template>
<script>

export default {
    
    
    props: {
    
    
        icon: {
    
    
            type: String, // 可以自己定义属性，做其他处理
            default: ''
        }
    },

    mounted() {
    
    
        // 1.属性
        // console.log(this.$attrs)
        // 2.插槽
        // console.log(this.$slots)
        // 3.作用域插槽
        // <slot :name="name" v-bind="slotData"></slot>
        // 4.事件
         for (let key in this.$listeners) {
    
    
            this.$refs.ipt[key] = e => {
    
    
                 this.$emit(key, e)
             }
         }
        // 5.实例
        // console.log(this.$refs.ipt)
        let refsObj = Object.entries(this.$refs.ipt)
        refsObj.forEach(([key, value]) => {
    
    
            if (typeof value === 'function') {
    
    
                 this[key] = value
            }
         });
    }

}
</script>

子组件

 <MyInput ref="ipt" :maxLength="5" v-model="222" placeholder="input with clear icon" icon="eye"
        @onChange="changeHandle" >
        <a-icon slot="prefix" type="user" />
 </MyInput>