1、前言
模拟element封装button组件、核心原理就是我们在调用组件的时候传入属性值、button组件内部来接收这些值、并且根据这些值来实现一些效果(控制颜色显示方式等等)
2、调用方法
- 传入不同的参数值、来实现改变按钮的颜色
- 在组件中间传入自定义的汉字、来控制按钮显示的内容
<div>
<my-button>默认123按钮</my-button>
<my-button type="primary">主要按钮</my-button>
<my-button type="success">成功按钮</my-button>
<my-button type="info">信息按钮</my-button>
<my-button type="warning">警告按钮</my-button>
<my-button type="danger">危险按钮</my-button>
</div>
3、button组件的封装
1、通过vue的props属性接收父组件传递过来的type值
props: {
type: {
type: String,
default: "",
}
},
2、拿到传过来的type属性之后、根据不同的值在css里面写不同类名的样式、(el-button–格式)然后动态添加到div即可
<template>
<div
class="el-button" //基础样式
:class="[ //动态添加的不同样式
`el-button--${type}`,
]"
>
<span> <slot></slot> </span>
</div>
</template>
3、为插槽用来动态接收组件中间包裹的文字
4、给自定义组件添加事件
1、可以通过给button组件派发一个事件、父级组件去监听该事件的触发(相当于子---->父传值)、也类似于事件的传递
2、通过添加native修饰符
.native
- 监听组件根元素的原生事件。
5、效果实现
举一反三、其他类似