Zusammenfassung der Tipps zur Implementierung von Vue-Komponenten

Dieser Artikel stellt hauptsächlich eine Zusammenfassung der Implementierungstipps für Vue-Komponenten vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Komponente dient, wie der Name schon sagt, dazu, eine relativ unabhängige Funktion, die mehrfach verwendet wird, in eine Komponente zu abstrahieren! Wenn wir eine bestimmte Funktion in eine Komponente abstrahieren möchten, müssen wir diese Komponente zu einer Blackbox für andere machen. Sie müssen sich nicht darum kümmern, wie sie implementiert wird, sie müssen sie nur entsprechend der vereinbarten Schnittstelle aufrufen!

Ich habe ein Bild verwendet, um die Zusammensetzung der Komponenten in Vue kurz zusammenzufassen:

Sie können sehen, dass in der Komponente ziemlich viele Dinge enthalten sind , und , es sind noch viele Punkte nicht aufgeführt, und jeder Wissenspunkt hier kann viel erweitert und diskutiert werden. Allerdings geht es hier nicht um Prinzipien, sondern nur um die Nutzung.

Nehmen wir als Beispiel ein Popup-Fenster mit Tipps, um die Wissenspunkte der folgenden Komponenten umfassend anzuwenden. Tipps zum Popup-Fenster: Fast alle Frameworks oder Klassenbibliotheken verfügen über eine Popup-Fensterkomponente, da die Popup-Fensterfunktion normalerweise sehr verbreitet ist und das Modul stark entkoppelt ist!

1. Schnittstellenkonventionen

Die hier implementierten Popup-Fenster umfassen: Requisiten, Ereignis, Slot, Ref usw. Hier können wir auch sehen, wie jeder Wissenspunkt verwendet wird.

/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showbtn 是否显示按钮
 * @param {string} modal.btnText 按钮文字
 */

 Vue.component('tips', {
  props : ['tipsOptions'],
  template : '#tips',

  data(){
    return{
      show : false
    }
  },

  computed:{
    tips : {
      get() {
        let tips = this.tipsOptions || {};
        tips = {
          title: tips.title || '提示',
          text: tips.text || '',
          showbtn : tips.showbtn || true,
          btnText : tips.btnText || '确定'
        };
        // console.log(tips);
        return tips;
      }
    }
  }
})

2. Implementierung der modalen Komponente

Tipps-Komponente ist relativ einfach zu implementieren, nur A einfach Popup, das den Benutzer dazu auffordert.

Vorlage:

<p class="tips" v-show="show" transition="fade">
  <p class="tips-close" @click="closeTips">x</p>
  <p class="tips-header">
    <slot name="header">
      <p class="title">{{tips.title}}</p>
    </slot>
  </p>
  <p class="tips-body">
    <slot name="body">
      <p class="notice">{{tips.text}}</p>
    </slot>
  </p>
  <p class="tips-footer">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a>
  </p>
</p>

Die Vorlagenstruktur ist in drei Teile unterteilt: Titel, Inhalt und Bedienbereich. Hier können Sie entweder Requisiten zum Übergeben von Zeichenfolgen verwenden oder Slots zur Anpassung verwenden.

Tipps-Stil:

.tips {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1001;
  -webkit-overflow-scrolling: touch;
  max-width: 690px;
  width: 260px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #888;
  border-radius: 4px;
}
.tips-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.tips-header{
  text-align: center;
  font-size: 25px;
}

Methoden innerhalb der Komponente:

methods:{
  closeTips(){
    this.show = false;
  },

  yes : function(){
    this.show = false;
    this.$emit('yes', {name:'wenzi', age:36}); // 触发yes事件
  },

  showTips(){
    var self = this;
    self.show = true;

    setTimeout(function(){
      // self.show = false;
    }, 2000)
  }
}

3. Rufen Sie die Tipps-Komponente auf

Zuerst beginnen wir mit dem Rendern der Komponente:

<p class="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">显示</a>
  <tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
    <h3 slot="header">提示标题</h3>
    <p slot="body">
      <p>hello world</p>
      <p>wenzi</p>
    </p>
  </tips>
</p>

Klicken Sie auf die Schaltfläche „Anzeigen“. um Tipps anzuzeigen:

var app = new Vue({
  el : '.app',

  data : {
    tipsOptions : {
      title : 'tip'
    }
  }

  methods:{
    // 监听从组件内传递出来的事件
    yes(args){
      // console.log( args );
      alert( JSON.stringify(args) );
    },

    // 显示tips
    showtips(){
      // console.log( this.$refs );
      this.$refs.dialog.showTips();
    }
  }
})

4. Zusammenfassung

In dieser einfachen Tippskomponente implementieren wir die Verwendung props Übergeben Sie Parameter, verwenden Sie $emit zum Ausgeben von Parametern und verwenden Sie Slots zum Anpassen von Inhalten.

Es ist zu beachten, dass Komponenten-Requisiten einseitig bindend sind. Das heißt, wenn sich die Eigenschaften der übergeordneten Komponente ändern, kann die untergeordnete Komponente die entsprechenden Datenänderungen empfangen, es tritt jedoch wiederum ein Fehler auf. Das heißt, die von Requisiten übergebenen Daten können in der untergeordneten Komponente nicht geändert werden, um den Zweck der Änderung der Eigenschaften der übergeordneten Komponente zu erreichen. Dadurch soll verhindert werden, dass untergeordnete Komponenten versehentlich den Status der übergeordneten Komponente ändern.

Darüber hinaus werden jedes Mal, wenn die übergeordnete Komponente aktualisiert wird, alle Requisiten der untergeordneten Komponente auf die neuesten Werte aktualisiert. Dies bedeutet, dass Sie Requisiten innerhalb untergeordneter Komponenten nicht ändern sollten. Wenn Sie dies tun, werden Sie von Vue in der Konsole gewarnt. Wenn Sie wirklich Änderungen an der Unterkomponente vornehmen müssen, können Sie diese beiden Methoden verwenden:

Definieren Sie eine lokale Variable und initialisieren Sie sie mit dem Wert von prop:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

Definieren Sie eine berechnete Eigenschaft, verarbeiten Sie den Prop-Wert und geben Sie ihn zurück.

props: ['size'],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

Natürlich handelt es sich dabei nur um die Implementierung von Komponenten auf einer einzigen Seite. Wir werden in Zukunft auch komplexere Komponenten implementieren.

Verwandte Empfehlungen:

Zusammenfassung der Tipps zur PHP-Entwicklung

CSS-bezogene Tipps

Python-Tipps

Das obige ist der detaillierte Inhalt vonZusammenfassung der Tipps zur Implementierung von Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!