Sample code for developing a button component in vue

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.

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 method

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: &#39;确认&#39;,
    }
   }
  }
 },
 methods: {
  confirm(){
   this.text += &#39;...&#39;
   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 on the page:

<template>
  <p class="btn-box">
   <Btn 
    :btnData="{text: &#39;确认注册&#39;}"
    <!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"-->
    @confirm="confirm"
    ref="btn"
   ></Btn>
  </p> 
</template>
<script>
import Btn from &#39;@/components/button&#39;
export default {
 components: {
  Btn
 },
 methods: {
  confirm(){
   if(!this.companyName){
    this.$toast("公司名不能为空") 
    this.$refs.btn.cancel()
   }
 }
}
</script>

Here, we should pay attention to some details:

1. The spacing between the button component and other p elements after it is formed, If it is determined within the component, it will be difficult to reuse.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax core XMLHttpRequest summary

Solving the problem of ajax cross-domain request data cookie loss

Use ajax to change page content and address bar URL without refreshing

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