So bedienen Sie Vue, um das V-Modell in einer benutzerdefinierten Komponente zu aktivieren

Dieses Mal erkläre ich Ihnen, wie Sie Vue bedienen, um das V-Modell in einer benutzerdefinierten definierten Komponente zu aktivieren, und wie Sie Vue bedienen, um das V-Modell in einer benutzerdefinierten Komponente zu aktivierenHinweise Was sind das? Hier sind tatsächliche Fälle.

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 die Antwort 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 Beispiel der Unterkomponente oben 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:

So verwenden Sie WebPack, um Vue Multi-Page zu konfigurieren

So verwenden Sie WebPack, um eine zu erstellen Entwicklungsumgebung reagieren

Das obige ist der detaillierte Inhalt vonSo bedienen Sie Vue, um das V-Modell in einer benutzerdefinierten Komponente zu aktivieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!