组件二次封装

基于ui组件库的二次封装

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

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

组件封装的方法或思想

1.属性和事件的传递

属性的传递：

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

使用$listeners传递事件

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

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

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

示例

<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>

<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>