【分析element-ui源码】link组件篇

【分析element-ui源码】link组件篇

link组件源码当前组件的所在目录：

知识点：

1. "$attrs": 使用 v-bind="$attrs"属性，vm.$attrs 是一个属性，其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。这些未识别的属性可以通过 v-bind="$attrs" 传入内部组件。未识别的事件可通过v-on="$listeners"传入（.native绑原生事件是没用的）。

   (vue官网解析地址：cn.vuejs.org/v2/guide/co…)

<template>
<!-- 父组件以形如:foo="xxx"或者v-bind="{age:12}"传给子组件的属性，但凡没有被子组件的props接收的，都会被扔到子组件的$attrs里去。 -->
  <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>
<script>
export default {
  name: "ElLink",
  props: {
    type: {
      type: String,
      default: "default",
    },
    //下划线
    underline: {
      type: Boolean,
      default: true,
    },
    //是否禁用状态
    disabled: Boolean,
    href: String,
    icon: String,
  },

  methods: {
    handleClick(event) {
      if (!this.disabled) {
        if (!this.href) {
          this.$emit("click", event);
        }
      }
    },
  },
};
</script>