使用vue怎么實現一個按鈕組件

今天就跟大家聊聊有關使用vue怎么實現一個按鈕組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

解決思路：

1. 通過父子組件通訊（$refs 和 props）

2. props接受參數, $refs調用子組件的方法

3. 來達到點擊提交改變按鈕狀態，如果不成功則取消按鈕狀態

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

<template>
<!-- use plane -->
<!-- 傳入bgColor改變按鈕背景色 -->
<!-- state切換button的狀態 調用cancel()可以切換 -->
<!-- text為按鈕文字 -->
 <div class="container">
  <button 
   @click="confirm"
   :disabled="state" 
   class="confirm" 
   :
  >{{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>

看完上述內容，你們對使用vue怎么實現一個按鈕組件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。