Beispielcode zum Entwickeln einer Schaltflächenkomponente in vue_vue.js

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. Schauen wir uns das mal an

Während eines kürzlichen Interviews wurde mir eine Frage zur Erstellung einer Schaltflächenkomponente in Vue gestellt

Ich habe damals gerade über die Idee gesprochen und sie angehängt den Code, 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

wird auf der Seite aufgerufen:

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

Hier müssen wir auf einige Details achten:

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

1. Nachdem die Knopfkomponente gebildet wurde, ist es schwierig, den Abstand zwischen ihr und anderen p-Elementen wiederzuverwenden es ist innerhalb der Komponente fixiert.

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.

Verwandte Empfehlungen:

Lernen in Vue bereitstellen/injizieren

Zur Organisation des Vue-Projekt-API-bezogenen Codes

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