一、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样式
- 必定有
el-link，再由由调用组件时传过来的type，组成的el-link--${type}，没传则为''
'el-link', type ? `el-link--${type}` : '',
打开浏览器的开发者工具可看到
这里举例type为primary
- 调用组件时候有没有传来
disabled，为true则有类is-disabled
disabled && 'is-disabled',
- 调用组件时候有传来
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"
另外个人觉得这篇讲的很好很详细，以下个人分析参考此篇：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>
