比如我们想去实现按钮的功能
下面这是默认的button，可能和我实际的需求可能会有一些出入。
image.png
所以我想自己去实现一个button。包括这些属性和方法等。
image.png
假设btn是我们的组件
image.png
提示没有注册这个btn元素，
image.png
第一步需要实现我们的组件，创建components文件夹，然后在下面创建我们的组件。
image.png
创建后会给我们生成一个基础的页面
image.png
和我们的页面构建是一样的。
image.png
首先在页面里面实现一些内容
image.png
加一个样式
image.png

image.png

使用这个组件

image.png
注册组件
image.png

image.png
加个红色的边框
image.png
image.png
color传入一个属性
image.png
组件内定义属性，使用props里面 是属性名
image.png
组件加上这个属性
image.png
文字变成了红色
image.png
传入blue的颜色
image.png

文字就变成了蓝色
image.png

事件

组件内的事件
image.png
image.png
image.png
希望在change里面接收事件
image.png
image.png

vue自定义事件

this.$emit传入的参数1：change就是
image.png
change就是我们在外面定义的这个事件名。
image.png
第二个参数，是事件的参数，直接传入this.color
image.png

image.png

image.png

slot插槽

image.png
image.png

image.pngimage.png

结束