vue的ui组件二次封装小技巧

1.利用$attrs给子组件传递多个属性

<template>
  <div class="my-input">
    <!--子组件绑定 $attrs 可以接受到父组件传递过来的所有值 -->
    <el-input v-model="value" v-bind="$attrs"></el-input>
  </div>
</template>

<script>
export default {
    data(){
        return{
            value:""
        }
    },
};
</script>

<style lang="scss" scoped>
.my-input {
  transition: 0.3s;
  width: 100%;
}
</style>>

2.利用$slots动态生成所有父组件传过来的插槽

<template>
  <div class="my-input">
    <el-input v-model="value" v-bind="$attrs">
        <!-- 动态生成父组件传过来的插槽 组件向插槽传递数据-->
        <template v-for="(value,name) in $slots"  #[name]="slotData">
            <slot :name="name" v-bind="slotData || {}"></slot>
        </template>
    </el-input>
  </div>
</template>