花生酱
主 题

vue2 封装组件常用的透传属性和事件

有时候，多处相同业务需求时需要对UI库进行二次封装。这里由于UI设计稿按钮一般是固定宽度的，这里就统一封装了一个渐变按钮，使用到了attrs和listeners。

普通组件默认情况下属性和事件自动添加到组件的根元素上v-bind="$attrs"和v-on="$listeners"会传入内部组件

**attrs：** 父组件除了`props`接收传的属性以及`class` 和 `style`之外，包括了`v-bind`绑定的所有属性，子组件中`v-bind="attrs"会绑定其中的所有属性 **$listeners：** 父组件中除.native 修饰器绑定的事件之外，包括了v-on绑定的所有事件，子组件中v-on="$listeners"`会绑定其中的所有事件

组件代码：

language 复制代码 
<template>
  <!-- 透传属性和事件 除了显性传递的都透传-->
  <van-button class="gradient-btn" v-bind="$attrs" v-on="$listeners" :color="color" :style="{width:width}">
    <span :style="{ color: textColor }">
      <slot></slot>
    </span>
  </van-button>
</template>

<script>
export default {
  name: 'GradientBtn',
  props: {
    color: {
      type: String,
      default: 'linear-gradient(180deg, #FFA300 0%, #FF842F 100%)'
    },
    width: {
      type: String,
      default: '135px'
    },
    textColor: {
      type: String,
      default: '#fff'
    },
    title: {
      type: String,
      default: '完成'
    }
  }
}
</script>

<style lang="less" scoped>
.gradient-btn + .gradient-btn {
  margin-left: 18px;
}
</style>

vue3 中的透传也是类似的

全部评论(0)