<template><!-- use plane --><!-- 傳入bgColor改變按鈕背景色 --><!-- state切換button的狀態(tài) 調(diào)用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: '確認(rèn)',    }   }  } }, methods: {  confirm(){   this.text += '...'   this.state = true   //這里是激活父組件的事件，因?yàn)樽咏M件是不會(huì)冒泡到父組件上的，必須手動(dòng)調(diào)用$emit   //相對(duì)應(yīng)父組件要在調(diào)用該組件的時(shí)候，將其掛載到上面   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: '確認(rèn)注冊(cè)'}"    <!--這里就要掛載$emit調(diào)用的事件 @confirm="想要調(diào)用事件的名字"-->    @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>