el-link和el-icon应该是element里面最简单的一部分了，但是我这边还是提出来了，简单了解一下。
附代码：
el-icon: 超级简单，不过这种写法我们以后也可以用在封装图标或者图片上，相同的图片样式，如果只需要更改图片链接，不妨这么封装一下，传入不同的地址就可以了。也没什么好讲的。
<template>
<i :class="'el-icon-' + name"></i>
</template>
<script>
export default {
name: 'ElIcon',
props: {
name: String
}
};
</script>
el-link 让我们看看代码
先看看官方给的参数
<template>
//从代码的角度看 type underline disabled都是css属性，样式的更改，还是很好理解的
<a
:class="[
'el-link',
type ? `el-link--${type}` : '',
disabled && 'is-disabled',
underline && !disabled && 'is-underline'
]"
:href="disabled ? null : href"
v-bind="$attrs"
@click="handleClick"
>
// 这边icon的处理也是，根据用户是否传入icon来决定是否渲染i标签，也是css样式的改变
<i :class="icon" v-if="icon"></i>
<span v-if="$slots.default" class="el-link--inner">
<slot></slot>
</span>
//这里把$slots和$attrs单独提出来讲一下，
<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>
知识点一： $attrs
先看看官方解释
//父组件代码
<template>
<div>
<h1>I am Parent!</h1>
<Children :msg1="'I am Children!'" msg2="test"></Children>
</div>
</template>
<script>
import Children from './Children';
export default {
name: 'parent',
components: {
Children
}
}
</script>
//子组件代码
<template>
<div v-bind="$attrs">
<h2>{{ msg1 }}</h2>
<h3>{{ $attrs.msg2 }}</h3>
</div>
</template>
<script>
export default {
name: 'Children',
//这里props只写了msg1,并没有写msg2,那么使用$atts就可以接受父组件传过来的组件了
props: {
msg1: '',
},
}
</script>
通过上个例子我们就明白了$attrs是element官方给我们的一种便利，我们可以写一个其它属性进来。
知识点2 $slots
先看看官方解释
element在这里使用插槽是什么意思呢？
<template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
//判断插槽icon是否有节点，如果有就渲染，如果没有就不渲染
这里涉及到插槽 ,我就顺便总结一下插槽相关内容。
相信封装过组件的同学们都应该使用过插槽。 最简单的使用方法就是
//父组件
<template>
<div>
<Children>安徽的骄傲好看</Children>
</div>
</template>
//子组件
<template>
//这里如果我们子组件不使用插槽的话，那么我们在使用组件的时候，中间的内容会被自动忽略不会被渲染出来。
<div>
</div>
</template>
//渲染效果为空
//让我们在子组件上加一个插槽
<template>
<div>
<slot ></slot >
</div>
</template>
//这时的渲染效果就是:
安徽的骄傲好看
//我们也可以使用插槽来写一些默认的内容
//比如上面我将子组件内容改一下
//子组件555
<template>
<div>
<slot >菜鸟的学习之路</slot >
</div>
</template>
//父组件55
<template>
<div>
<Children></Children>
</div>
</template>
//这时就会自动渲染插槽里面的内容
菜鸟的学习之路
//如果不想用默认内容那我的父组件这样写
<template>
<div>
<Children>我要成为大佬</Children>
</div>
</template>
//这时写在子组件里面的内容会被覆盖掉，渲染结果为：
我要成为大佬
这里应该就大致了解了插槽的作用了
上面是默认插槽的使用方法，下面我们看看其它的使用方法
具名插槽:顾名思义就是插槽带上了名字，为什么要带上名字呢，肯定是有用的，什么情况插槽会需要名字呢？？肯定就是我们在同一个组件里面写了很多个插槽，需要区分的时候了。 多说一点，我们的默认插槽也是有名字的，名字就是default 举例的时候到了
//我复制了官网的例子，哈哈哈，因为懒~~
<!--子组件-->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<!--父组件可以这样使用-->
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
<!--父组件也可以这样使用-->
<div class="container">
<header>
<h1>Here might be a page title</h1>
</header>
<main>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</main>
<footer>
<p>Here's some contact info</p>
</footer>
</div>
最后，注意官方提示：
以上就是简单用法，至于其他简写内容什么的，详情移步官网：cn.vuejs.org/v2/guide/co…
~~~ 有错误欢迎指正啊 ~~~~~~~~~~~~~~
