[JavaScript知识库]【vue2组件封装学习】vue2组件封装学习（一） 按钮button

写在前面

由于是学习记录使用，存在不完善的地方，会在全部学习完之后进行完善和放出源代码（应该），感谢阅读

步骤

1. 创建基础模板

创建.vue文件，命名为apl-button.vue，使用快捷键放上组件三件套（template,script,style)
在template中给上一个原生button

2. 使用动态类名

类名使用动态的:class=" … "
来达到不同的表现效果
目前是只学习到了按钮的类型，是否朴素按钮，是否圆角按钮，是否圆形按钮，是否禁用按钮，其中，禁用需要搭配button原生disabled

    :class="[
      `apl-button--${type}`,
      {
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disabled
      }
    ]"
	:disabled="disabled"

3. 加上父子组件传值
   父子组件传值通过给模板button中增加一个
   （ps:vue3已弃用该属性）
   （pps:2022/2/7vue3全面推广，是时候学习3了）

<template>
	<button>
		<slot></slot>
	</button>
</template>

调用组件时就可以自己给按钮命名了
请不要

4. 传属性值
   这不是必须的嘛，不然谁还用我的组件啊！！！
   使用props进行传递，对props进行约束和校验

  props: {
    type: {
      // 接受的数据类型
      type: String,
      // 不传type就使用默认类型
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

如此一来就可以随意改变按钮的风格了

5. 增加点击事件
   没错就是增加点击事件，可能刚开始你会觉得一个按钮有点击事件不是很正常的吗，写个click就有了嘛
   但是，我们写的一个组件，本质是一个模板里面放了一个button，外面写的click只能到模板上，而无法触发button上的click事件，所以我们需要增加一个派发事件
   先给button一个click，让他等于我们自定义的函数

    @click="handleClick"

然后在methods中写入方法派发

  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }

如此一来，就可以自由写入click方法了

总结

1.常见的组件可以直接使用原生的元素
2.样式的修改通过动态类名来控制
3.部分属性的实现需要通过原生属性控制（disabled）
4.点击事件的方法需要emit派发，推测其他触发的方法也是类似的
5.传值的props需要进行约束和校验

其他值得记录的内容

1.通过this.$slots可以获取到所有的插槽内容

吐槽内容

我淦这个standard的代码规范也太难受了吧，才写了一个组件，已经记录下来了7条错误，真是可怕，而且使用vetur自带的代码格式化也是错误的，希望马上做的越来越好