Detailed explanation of the steps to develop button components in Vue

This time I will bring you a detailed explanation of the steps to develop button components in vue. What are the precautions for developing button components in vue. Here are practical cases, let’s take a look.

I just talked about my ideas at that 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: '确认',
    }
   }
  }
 },
 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 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 '@/components/button'
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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps for EL to obtain context parameters

How to determine whether an el expression is non-empty

The above is the detailed content of Detailed explanation of the steps to develop button components in Vue. For more information, please follow other related articles on the PHP Chinese website!