Detaillierte Erläuterung der Schritte zum Entwickeln von Schaltflächenkomponenten in Vue

Dieses Mal werde ich Ihnen die Schritte zum Entwickeln einer Schaltflächenkomponente in Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Entwicklung einer Schaltflächenkomponente in Vue? sehen.

Ich habe gerade über meine damaligen Ideen 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: '确认',
       }
      }
     }
    },
    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>

   Nach dem Login kopieren
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 '@/components/button'
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 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:

So ermitteln Sie, ob ein el-Ausdruck vorliegt ist nicht leer

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Entwickeln von Schaltflächenkomponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!