脚本宝典收集整理的这篇文章主要介绍了vue 开发一个按钮组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

最近面试，被问到一个题目，vue做一个按钮组件；
当时只是说了一下思路，回来就附上代码。

解决思路：

通过父子组件通讯（$refs 和 props）
props接受参数, $refs调用子组件的方法
来达到点击提交改变按钮状态，如果不成功则取消按钮状态

在src/components/ 下建一个button.vue

<template>
<!-- use plane  -->
<!-- 传入bgColor改变按钮背景色 -->
<!-- state切换button的状态 调用cancel()可以切换 -->
<!-- text为按钮文字 -->
  <div class="container">
    <button  
      @click="confirm"
      :disabled="state" 
      class="confirm" 
      :style="{background: btnData.bgColor}"
    >{{text}}</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      text: this.btnData.text,
      state: false,
    }
  },
  props: {
    btnData: {
      types: Array,
      default() {
        return {
          text: '确认',
        }
      }
    }
  },
  methods: {
    confirm(){
      this.text += '...'
      this.state = true
      //这里是激活父组件的事件，因为子组件是不会冒泡到父组件上的，必须手动调用$emit
      //相对应父组件要在调用该组件的时候，将其挂载到上面
      this.$emit("confirm")
    },
    cancel(){
      this.text = this.btnData.text
      this.state = false
    }
  }
}
</script>
<style lang="less" scoped>
.confirm {
  border: none;
  color: #fff;
  width: 100%;
  padding: 1rem 0;
  border-radius: 4px;
  font-size: 1.6rem;
  background: #5da1fd;
  &:focus {
    outline: none;
  }
}
</style>

在页面中调用：

<template>
    <div class="btn-box">
      <Btn 
        :btnData="{text: '确认注册'}"
        <!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"-->
        @confirm="confirm"
        ref="btn"
      ></Btn>
    </div> 
</template>
<script>
import Btn from '@/components/button'
export default {
  components: {
    Btn
  },
  methods: {
    confirm(){
      if(!this.companyName){
        this.$toast("公司名不能为空")  
        this.$refs.btn.cancel()
      }
  }
}
</script>

在这里，要注意一些细节：

1. button组件形成之后和其它div元素的间距，如果是在组件内定死是很难复用的。
2. 在复用的时候，在父组件中是改变不了子组件的样式的，如果要强制更改，
   单独写一个并去掉scoped。

脚本宝典总结

以上是脚本宝典为你收集整理的vue 开发一个按钮组件全部内容，希望文章能够帮你解决vue 开发一个按钮组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。