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

一、github地址

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

二、文档地址

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

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

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

标签的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

Child.vue

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

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

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

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

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

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

例如：

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

编译后的HTML

调用代码：

查看 

这里面的就属于默认插槽，没有定义name=""

7.icon插槽

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