vue2创建高复用组件的方式

1.使用 v-bind="$attrs"，主要用于在组件树中自动传递属性，当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定。相当于把父组件用到的属性自动获取。

 <el-button :type="getButtonType" 
    :icon="getIcon"
    v-bind="$attrs" 
    size="small"
   
    class="u-ptype-button">
    <slot></slot>
  </el-button>

2.使用 v-on="$listeners"，

• 自动传递事件监听器：v-on="$listeners"会收集父作用域中的(不含.native修饰器的)v-on事件监听器，并把它们添加到当前组件的实例上。
• 简化组件间通信：通过自动传递事件监听器，简化了父组件与子组件之间的通信方式，使得开发者可以更专注于业务逻辑的实现。

    <el-button :type="getType" 
      :icon="Icons"
      size="small"
      v-on="$listeners"
      class="ptype">
      <slot></slot>
    </el-button>

  3.如果要在子组件标签上使用v-model属性

  你可以在组件内部使用model选项来定义：

• prop名：这个prop用于接收父组件通过v-model绑定的值。
• event名：当子组件需要更新这个值时，它会触发一个事件，该事件的名称由model选项中的event属性指定。

  <template>
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      type="text"
    />
  </template>
  
  <script>
  export default {
    name: 'MyCustomInput',
    props: {
      modelValue: String // 接收的值，与v-model绑定的prop名一致
    },
    emits: ['update:modelValue'], // 明确声明发出的事件
    model: {
      prop: 'modelValue', // 父组件通过v-model绑定的prop名
      event: 'update:modelValue' // 子组件触发以更新v-model的事件名
    }
  }
  </script>

  //子组件
  <MyCustomInput v-model="inputValue" />

• 这里，v-model="inputValue"会被Vue解析为:modelValue="inputValue" @update:modelValue="inputValue = $event"。

• v-model的默认prop和event分别是modelValue和update:modelValue。但你可以通过组件的model选项来自定义它们