使用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怎么实现一个按钮组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。