关于vue.js:vue封装第三方组件

35次阅读

共计 1024 个字符,预计需要花费 3 分钟才能阅读完成。

需要场景

咱们可能在工作中常常会遇到这样的场景,须要基于某个 UI 组件库(本文以 Vuetify 为例,其余的也同理)封装一个可复用的组件,不仅要实现自定义性能,还心愿能沿用第三方组件自身提供的属性,事件等。
举几个具体的栗子:

  • 对立给 text-field 增加一个 clearable 的动作
  • 想更改 text-field 默认 label 款式,由点击悬浮变为固定地位
  • 给 image 组件增加 loading 的成果
  • 给 table 组件对立增加一些诸如挪动列,刷新,csv 下载的动作

技术关键点

一、继承属性

v-bind=”$attrs” 和 inheritAttrs: false

$attrs 蕴含了父组件里除了 props 属性的 attribute 绑定,所以在子组件中应用 $attrs 就能够获取到父组件传递的属性。
然而默认状况下这些属性会被认作是一般的 HTML attribute 利用到子组件的根元素上,当初咱们像创立一个 wrapper 来做封装时很可能会呈现不合乎预期的状况,此时咱们就须要设置 inheritAttrs: false 来打消这种默认行为。

vue2.x 和 vue3.x 中的区别

$attrs 在 vue2 和 vue3 中的体现有所不同,在 vue2 里,$attrs 不蕴含 style 和 class,而在 vue3 中蕴含

二、继承事件

v-on=”$listeners”

$listeners 里蕴含了父组件作用域中 v -on 事件监听器。咱们在子组件中能够通过 v -on=”$listeners” 来获取父组件传入的事件

vue2.x 和 vue3.x 中的区别

$listeners 在 vue3 中被移除了,能够间接通过 $attrs 来代替

三、继承插槽

$scopedSlots 和 $slots

vuetify 中提供了非常灵活的自定义插槽,所以对于插槽的继承也是十分重要滴

<template v-for="(_, scopedSlotName) in $scopedSlots" #[scopedSlotName]="slotData">
  <slot :name="scopedSlotName" v-bind="slotData" />
</template>
<template v-for="(_, slotName) in $slots" #[slotName]>
  <slot :name="slotName" />
</template>

参考文章

  • https://dev.to/onurelibol/cre…
  • https://dev.to/kouts/create-w…

正文完
 0