Detaillierte Erläuterung der Schritte zur Verwendung des V-Modells in benutzerdefinierten Komponenten in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zur Verwendung des V-Modells in benutzerdefinierten definierten Komponenten von vue geben. Was sind die Vorsichtsmaßnahmen für die Verwendung des V-Modells in benutzerdefinierten Komponenten von Vue? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

V-Modell-Direktive

Der sogenannte „Befehl“ erweitert tatsächlich die Funktion (Attribut) des HTML-Tags .

Beginnen wir mit einer Komponente, ohne Vue-Modell, normale Vater-Sohn-Kommunikation

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child @returnBack="turnBack" :give="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  },
  methods: {
    turnBack(val) {
      this.sthGiveChild = val;
    }
  }
}
</script>

rrree

Nachdem Sie auf „Antworten“ geklickt haben, wird das, was der Vater zu seinem Sohn gesagt hat, zur Antwort des Sohnes. Auch die vom Sohn erhaltenen Informationen haben sich verändert und ermöglichen eine Kommunikation.

Wechseln Sie zum V-Modell

<!-- child -->
<template>
<p class="child">
  <p>我是儿子，父亲对我说： {{give}}</p>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="returnBackFn">回应</a>
</p>
</template>
<script>
export default {
  props: {
    give: String
  },
  methods: {
    returnBackFn() {
      this.$emit('returnBack', '还你200块');
    }
  }
}
</script>

rrree

Obwohl das Copywriting unterschiedlich ist, ist der Effekt letztlich derselbe.

Sehen Sie sich das V-Modell der offiziellen benutzerdefinierten Komponente an

Offizielles Beispielhttps://vuefe.cn/v2/api/#model

Es gibt diesen Satz: Standardmäßig verwendet das V-Modell einer Komponente den Wert als Requisite und die Eingabe als Ereignis.

Versuchen Sie, das obige Beispiel für die Unterkomponente zu ändern, und es wird funktionieren.

Fassen wir zusammen:

Wenn Sie sind faul und möchten Ereignisse nicht selbst verarbeiten, dann verwenden Sie die Standardereignisse „Wert“ und „Eingabe“. Wenn Sie native Ereignisse verwenden, kann sogar das Modellattribut weggelassen werden.

Wenn Sie möchten, dass Ihr Code klarer ist und benutzerdefinierte Ereignisse unterscheidet, dann ist die folgende Kombination die richtige für Sie.

Die Definition von Requisite und Ereignis hängt von Ihrer eigenen Stimmung ab, natürlich müssen Sie Ihre Meinung wissen [versuchen Sie, Schlüsselwörter zu vermeiden]

<!-- parent -->
<template>
<p class="parent">
  <p>我是父亲, 对儿子说： {{sthGiveChild}}</p>
  <Child v-model="sthGiveChild"></Child>
</p>
</template>
<script>
import Child from './Child.vue';
export default {
  data() {
    return {
      sthGiveChild: '给你100块'
    };
  },
  components: {
    Child
  }
}
</script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben Achten Sie bitte auf diesen Artikel, um weitere spannende Dinge zu erfahren. Andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue verwendet eine benutzerdefinierte Symbol-Icon-Schrittanalyse

Verwenden Sie die Mockjs-Schrittanalyse im Vue-Cli-Projekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung des V-Modells in benutzerdefinierten Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!