vue erstellt eine Schaltflächenkomponente

Dieses Mal zeige ich Ihnen, wie Sie mit Vue eine Schaltflächenkomponente erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer Schaltflächenkomponente mit Vue? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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>

Achten Sie hier auf einige Details:

1. Knopfkomponente Nach der Bildung ist es schwierig, den Abstand zwischen ihm und anderen p-Elementen wiederzuverwenden, wenn er innerhalb der Komponente fixiert wird.

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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre

Kehren Sie nach dem Teilen der Applet-Entwicklungsseite zur Startseite zurück

Verwenden Sie den Ausdruck el, um zu beurteilen, ob dies der Fall ist leer

Das obige ist der detaillierte Inhalt vonvue erstellt eine Schaltflächenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!