深入Vue之解析ElementUI组件--link

一、github地址

https://github.com/ElemeFE/element/blob/dev/packages/link/src/main.vue

二、文档地址

https://element.eleme.cn/#/zh-CN/component/link

三、解析过程（很多注释在源代码是不合法的，这里只是为了更直观的展示）

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

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

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

    <template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>  // 注解7
  </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: {
    // 注解4
    handleClick(event) {
      if (!this.disabled) {
        if (!this.href) {
          this.$emit('click', event);
        }
      }
    }
  }
};
</script>

1. 动态class样式

1. 必定有el-link，再由由调用组件时传过来的type，组成的 el-link--${type}，没传则为''

'el-link', type ? `el-link--${type}` : '',

打开浏览器的开发者工具可看到
这里举例type为primary

2. 调用组件时候有没有传来disabled，为true则有类is-disabled

disabled && 'is-disabled',

3. 调用组件时候有传来underline，而且没传disabled，就有类is-underline

underline && !disabled && 'is-underline'

2. href

<a></a>标签的href属性，如果在调用组件时传来了disabled，则href的值为null(以不会跳转来模拟禁用效果)，否则就是传过来的href值。

:href="disabled ? null : href"

3. v-bind="$attrs"

Vue官方文档，可搜索$attrs快速定位

另外个人觉得这篇讲的很好很详细，以下个人分析参考此篇：https://blog.csdn.net/qq_33559093/article/details/82878862

多级组件通信，用vuex太重，props太麻烦。

vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。

Parent.vue

<template>
  <div class="hello">
    <h1>I am Parent!</h1>
    <child :msg1="'I am Children!'" msg2="test"></child>
  </div>
</template>

<script>
  import Child from './Child';
  export default {
    name: 'parent',
    components: {
      Child
    },
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Child.vue

<template>
    <div v-bind="$attrs">
      <h2>{{ msg1 }}</h2>
      <h3>{{ $attrs.msg2 }}</h3>
    </div>
</template>

<script>
    export default {
        name: 'child',
        inheritAttrs: true,
        props: {
          msg1: '',
        },
    }
</script>

<style scoped>

</style>

通过$attrs能获取到不被认为 props特性绑定的属性

5.点击事件（这里有详细说明）

如果没有被设定禁用，且父组件调用时填了href，则把点击事件传递回给父组件。

if (!this.disabled) {
        if (!this.href) {
          this.$emit('click', event);
        }
}

6. 默认插槽（这里有详细说明）

有使用插槽用el-link--inner样式包裹。

例如：

以饿了么官方文档红框中的链接例子
编译后的HTML

调用代码：

<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>

这里面的<i class="el-icon-view el-icon--right"></i>就属于默认插槽，没有定义name=""

7.icon插槽

如果父组件有使用name="icon"插槽，则渲染出来

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