Beispielcode zum Entwickeln einer Schaltflächenkomponente in Vue

In diesem Artikel wird hauptsächlich der Beispielcode für die Entwicklung einer Schaltflächenkomponente in Vue vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

In einem kürzlichen Interview wurde mir eine Frage zur Erstellung einer Schaltflächenkomponente in Vue gestellt.

Ich habe damals gerade über die Idee gesprochen und den Code angehängt, als ich zurückkam.

Lösung:

1. Kommunikation über Eltern-Kind-Komponenten ($refs und props)

2. props akzeptiert Parameter, $refs Aufrufe Die Methode der Unterkomponente

3. wird verwendet, um den Schaltflächenstatus durch Klicken auf „Senden“ zu ändern. Wenn dies nicht erfolgreich ist, wird der Schaltflächenstatus abgebrochen > wird unter src/components/ erstellt. Ein 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>

wird auf der Seite aufgerufen:

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

Hier sollten Sie auf einige Details achten:

1. Der Abstand zwischen der Knopfkomponente und anderen p-Elementen nach ihrer Bildung. Wenn er innerhalb der Komponente bestimmt wird, ist eine Wiederverwendung schwierig.

2. Bei der Wiederverwendung kann der Stil der untergeordneten Komponente nicht in der übergeordneten Komponente geändert werden. Wenn Sie die Änderung erzwingen möchten, schreiben Sie eine separate und entfernen Sie den Gültigkeitsbereich.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Kern-XMLHttpRequest-Zusammenfassung

Lösung des Problems des Cookie-Verlusts von Ajax-Cross-Domain-Anfragedaten-Cookies

Verwenden Sie Ajax, um den Seiteninhalt und die URL der Adressleiste ohne Aktualisierung zu ändern

Das obige ist der detaillierte Inhalt vonBeispielcode zum Entwickeln einer Schaltflächenkomponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!