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>

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>

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:

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

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!