element link源码这为什么需要用到$attrs通信

Question

<template>
  <a
    :class="[
      'el-link',
      type ? `el-link--${type}` : '',
      disabled && 'is-disabled',
      underline && !disabled && 'is-underline'
    ]"
    :href="disabled ? null : href"
    v-bind="$attrs"
    @click="handleClick"
  >

    <i :class="icon" v-if="icon"></i>

    <span v-if="$slots.default" class="el-link--inner">
      <slot></slot>
    </span>

    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
  </a>
</template>

Answer 1

“通信”我觉得不准确，根据vue对于$attr的说明，其实就是透传一些标签的原始属性，比如rel和target属性。

这种做法是封装组件比较常见的，对于a，input之类的标签，很多属性不可能作为组件props在透传一遍，所以在解析模板的时候$attr负责接收那些原生的属性，从表现上来说，封装的组件具有足够的透明性。