Was müssen Sie vorbereiten, um Schaltflächenkomponenten in Vue zu entwickeln?

Dieses Mal bringe ich Ihnen alles, was Sie zur Entwicklung einer Schaltflächenkomponente in Vue benötigen. Was sind die Vorsichtsmaßnahmen für die Entwicklung einer Schaltflächenkomponente in Vue? .

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: '确认',
       }
      }
     }
    },
    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>

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:

JS linke Liste nach rechts übertragen

WeChat-Applet teilt die Seite und springt zurück zur Homepage

Das obige ist der detaillierte Inhalt vonWas müssen Sie vorbereiten, um Schaltflächenkomponenten in Vue zu entwickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!