What do you need to prepare to develop button components in Vue?

This time I will bring you what you need to prepare to develop a button component in vue. What are the precautions for developing a button component in vue. The following is a practical case, let's 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 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:

JS left list transfer to the right

##WeChat applet shares the page and jumps back to the home page

The above is the detailed content of What do you need to prepare to develop button components in Vue?. For more information, please follow other related articles on the PHP Chinese website!