基于ui组件库的二次封装

对组件进行二次封装主要有以下几个原因：

1. 提高复用性：通过封装通用组件，可以在多个地方复用，减少代码重复，提高开发效率。
2. 统一风格和规范：确保所有使用该组件的地方都遵循统一的风格和规范，提升项目的整体质量。
3. 扩展功能：可以在现有的组件基础上添加新的功能或行为，而不需要修改原始组件。
4. 简化使用：简化组件的使用方式，减少父组件中的代码量。
5. 解耦：将组件的实现细节与业务逻辑解耦，使得代码更易于维护和扩展。
6. 适应性：更容易地适应不同的项目需求和设计变化。

组件封装的方法或思想

1.属性和事件的传递

属性的传递：

使用$attrs而不是使用props进行数据传递，

使用$listeners传递事件

2.封装的组件也可以像 ui组件库那样使用插槽拓展功能

3.获取组件的属性或方法等

在组件中用ref把属性或方法提升到实例中，

示例

javascript"><template><div><el-input v-bind="$attrs" ref="inp" v-on="$listeners"><template v-for="(value, name) in $slots" #[name]="slotData"><slot :name="name" v-bind="slotData"></slot></template></el-input></div>
</template>
<script>
export default {data() {return {}},created() {console.log(this.$attrs)},mounted() {const entries = Object.entries(this.$refs.inp)// console.log(entries);//把ui组件的方法和属性提升到实例当中，父组件可以用ref获取获取这些方法和属性for (const [key, value] of entries) {this[key] = value}}
}
</script>

javascript"><template><div id="app"><MyForm placeholder="请输入内容" v-model="data" ref="myinp" @focus="handleClick"> </MyForm></div>
</template><script>
import MyForm from './components/MyForm.vue'export default {name: 'App',components: {MyForm},data() {return {data: ''}},mounted(){console.log("111",this.$refs.myinp.value);    this.$refs.myinp.value.focus()},methods:{handleClick(){console.log('22222');}}
}
</script>