最近面试，被问到一个题目，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.textthis.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。