这次给大家带来vue做一个按钮组件，vue做一个按钮组件的注意事项有哪些，下面就是实战案例，一起来看一下。
解决思路：
通过父子组件通讯（$refs 和 props）
props接受参数, $refs调用子组件的方法
来达到点击提交改变按钮状态，如果不成功则取消按钮状态
在src/components/ 下建一个button.vue
<template><!-- use plane --><!-- 传入bgcolor改变按钮背景色 --><!-- state切换button的状态 调用cancel()可以切换 --><!-- text为按钮文字 --> <p class="container"> <button @click="confirm" :disabled="state" class="confirm" :style="{background: btndata.bgcolor}" >{{text}}</button> </p></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> <p class="btn-box"> <btn :btndata="{text: '确认注册'}" <!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"--> @confirm="confirm" ref="btn" ></btn> </p> </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组件形成之后和其它p元素的间距，如果是在组件内定死是很难复用的。
2. 在复用的时候，在父组件中是改变不了子组件的样式的，如果要强制更改，单独写一个并去掉scoped。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读
小程序开发分享页面后返回首页
使用el表达式非空判断
以上就是vue做一个按钮组件的详细内容。