父子组件传值之标签属性透传

批量新增查询页面，查询条件中有个重复性极高的下拉框，每个页面重复请求下拉框数据，然后绑定到selectOptions中，提交查询条件完成后通过form表单提交数据，想封装成组件，这样在页面中就只需要引入组件就可以了，实现过程中发现HTML标签中的属性不好传递，例如v-model，废话不多说，上解决方案

v-bind="$attrs"

element ui为例，子组件组件name为useSelect,子组件中的template中的内容如下

<el-select
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-option
      v-for="item in selectOptions"
      :key="item.id"
      :label="item.label"
      :value="item.id"
    >
    </el-option>
  </el-select>

在父组件中的使用

<use-select
  style="width:100%"
  v-model={id}
  placeholder="请选择"
></use-select>

$attrs的作用就是将<use-select>标签中的style,v-model,placeholder属性传递到子组件中，这样可以减少很多props来回传参，而且v-model这种双向数据绑定操作直接透传使用起来也很方便，用最少的代码解决这个父子组件参数的传递

同理v-on="$listeners"可以直接透传绑定的事件

这样就解决了二次封装组件的标签属性透传问题！