0
点赞
收藏
分享

微信扫一扫

【vue2组件封装学习】vue2组件封装学习(一) 按钮button

才德的女子 2022-02-17 阅读 64

写在前面

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

步骤

  1. 创建基础模板

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

  1. 使用动态类名

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

    :class="[
      `apl-button--${type}`,
      {
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disabled
      }
    ]"
	:disabled="disabled"
  1. 加上父子组件传值
    父子组件传值通过给模板button中增加一个
    (ps:vue3已弃用该属性)
    (pps:2022/2/7vue3全面推广,是时候学习3了)
<template>
	<button>
		<slot></slot>
	</button>
</template>

调用组件时就可以自己给按钮命名了
请不要如图,字不重要

  1. 传属性值
    这不是必须的嘛,不然谁还用我的组件啊!!!
    使用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
    }
  },

如此一来就可以随意改变按钮的风格了
在这里插入图片描述

  1. 增加点击事件
    没错就是增加点击事件,可能刚开始你会觉得一个按钮有点击事件不是很正常的吗,写个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自带的代码格式化也是错误的,希望马上做的越来越好

举报

相关推荐

0 条评论