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。