Sample code for developing a button component in vue_vue.js

This article mainly introduces the sample code for developing a button component in Vue. Now I will share it with you and give you a reference. Let’s come and take a look

In a recent interview, I was asked a question about making a button component in vue;

I just talked about the idea at the time and attached the code when I came back.

Solution:

1. Communication through parent-child components ($refs and props)

2. props accepts parameters, $refs calls Subcomponent methods

3. To achieve click submit to change the button state, if unsuccessful, cancel the button state

Build under src/components/ A 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>

is called in the page:

<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>

Here, Pay attention to some details:

1. After the button component is formed, the spacing between it and other p elements will be difficult to reuse if it is fixed within the component.

2. When reusing, the style of the child component cannot be changed in the parent component. If you want to force the change, write a separate one and remove the scoped.

Related recommendations:

Learning about provide/inject in vue

On the organization of vue project api related code

The above is the detailed content of Sample code for developing a button component in vue_vue.js. For more information, please follow other related articles on the PHP Chinese website!