在vue中如何优雅的封装第三方组件

2024-01-21 00:06:01
开发
46

在使用第三方组件的时候或多或少的会因为样式，业务不符合自己的需求进而进行封装。是否你也会有这样的困扰。封装业务组件的时候，弄了好多业务进自己的组件里。要传递好多参数给自己封装的组件，然后再在封装的组件里传递给第三方组件。不禁要知道每个组件的参数的意思还要对其增加参数。用于传递给第三方组件。一旦业务拓展，就还需要对应往封装组件增加属性，组件内增加接收传递给第三方组件。后期维护起来痛苦不堪。那么下面我要说的便是可以解决你的问题。

$attrs

2.4.0 新增

主要作用是直接在封装的业务组件上将相应的属性参数可以直接给到第三方组件，不需要在业务组件中额外接收。

官网解释：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

用法v-bind="$attrs"

业务组件
 <Image-slider-pro :bindPaneIndex="index"
                              :bindPane="`pane${index}`"
                              @nextPage="nextImage"
                              @prePage="preImage"
                              @drag-start="dragStart"
                              :model="model"
                              :direction="model === 'portrait' ? 'ttb' : 'ltr'"
                              @changeHandle="handleSliderChange"
                              :showTurnPage="(layoutData.length <= 4 && !(m ===3 && n ===1))"
                              v-if="layoutData[index].totalImage && (sequenceIndex === index || ctrlList.findIndex(key => index === key) > -1)"
                              :value.sync="layoutData[index].isExpanded ? layoutData[index].sliderCurrPage : layoutData[index].currPage"
                              :max="maxPage(index)"
                              :min="1"></Image-slider-pro>

业务组件内部
<template>
//....此处省略一堆代码
<vue-slider class="slider-main"
                  ref="imageSlider"
                  :width="model === 'portrait' ? 12 : 0"
                  :height="model === 'landscape' ? 12 : 0"
                  :duration="0"
                  :value="value"
                  :adsorb="true"
                  tooltipPlacement="top"
                  tooltip="none"
                  :processStyle="model === 'portrait' ? processStyleTtb : processStyleLtr"
                  @change="handleChange"
                  v-bind="$attrs"
                  v-on="$listeners">
        <template v-slot:dot>
          <div class="slider-dot">
            <div class="slider-dot_inner"></div>
          </div>
        </template>
      </vue-slider>
</template>