在vue中怎样优雅的封装第三方组件

手机软件开发 · 2024-9-11 08:11:50

在使用第三方组件的时间或多或少的会由于样式，业务不符合自己的需求进而举行封装。是否你也会有如许的困扰。封装业务组件的时间，弄了很多多少业务进自己的组件里。要转达很多多少参数给自己封装的组件，然后再在封装的组件里转达给第三方组件。不禁要知道每个组件的参数的意思还要对其增长参数。用于转达给第三方组件。一旦业务拓展，就还需要对应往封装组件增长属性，组件内增长吸收转达给第三方组件。后期维护起来痛楚不堪。那么下面我要说的便是可以办理你的标题。
$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-sliderhttps://cn.vuejs.org/v2/api/#vm-attrs</p>$listeners

2.4.0 新增

紧张作用是监听变乱，然后转达给第三方组件,不含 .native 修饰器的,官方表明

官网表明：包罗了父作用域中的 (不含 .native 修饰器的) v-on 变乱监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高条理的组件时非常有效。

使用 v-on="$listeners",参考上面代码。

更多参考

https://cn.vuejs.org/v2/api/#vm-listeners

在vue中怎样优雅的封装第三方组件

所属分类: 问答交流

新帖推荐: 30日

推荐作品