vue.js ist eine Bibliothek zum Erstellen datengesteuerter Webschnittstellen. Das Ziel von Vue.js besteht darin, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten mit einer möglichst einfachen API zu ermöglichen. Im folgenden Artikel werden hauptsächlich relevante Informationen zur Kommunikationsimplementierung von übergeordneten und untergeordneten V-Modell-Komponenten im Vue-Projekt vorgestellt.
Vorwort
In Vue-Projekten haben wir oft eine solche Anforderung. Die übergeordnete Komponente bindet das V-Modell und die Unterkomponenteneingabe Ändert den übergeordneten Wert, der an das V-Modell der Komponente gebunden ist. Vielen Freunden ist dieser Vorgang nicht ganz klar, was ein tieferes Verständnis des V-Modells erfordert. Lassen Sie uns heute über das V-Modell sprechen.
Vues bidirektionale Datenbindung
Der V-Model-Befehl kann nur in ,
Diese Frage wird in vielen Front-End-Interviews erwähnt. Der Interviewer fragte Sie: Was ist das Prinzip der bidirektionalen Datenbindung in Vue? Natürlich ist das auch eine bekannte Frage. Sie können die Antwort überall finden, indem Sie auf Baidu suchen.
Im Allgemeinen werden Sie feststellen, dass Object.defineProperty() zur Überwachung des Datenabrufs und -satzes verwendet wird, um eine Datenentführung zu erreichen.
Wenn Sie nicht viel über Object.defineProperty() wissen, können Sie auf den Link oben klicken, um einen Blick auf die Syntax zu werfen!
Ein einfaches Beispiel:
var blog = {
name: 'haorooms博客'
};
console.log(blog.name); // haorooms博客Wenn Sie beim Ausführen von console.log(blog.name) direkt einen Buchtitel zum Haorooms-Blog hinzufügen möchten, was sollten Sie tun? Mit anderen Worten, was ist der Attributwert des Überwachungsobjektblogs? Dann ist Object.defineProperty( ) praktisch:
var blog= {}
var name = '';
Object.defineProperty(blog, 'name', {
set: function (value) {
name = value;
console.log('欢迎来到' + value);
},
get: function () {
return '《' + name + '》'
}
})
blog.name = 'haorooms博客'; // 欢迎来到haorooms博客
console.log(blog.name); // 《haorooms博客》Führen Sie den obigen Code aus, um den Effekt zu sehen!
Wie wird die bidirektionale Datenbindung von Vue implementiert? Es gibt auch viele Implementierungscodes im Internet, daher werde ich hier nicht zu sehr ins Detail gehen!
Verwendung des V-Modells
Oben habe ich so viel gesagt, aber es dient eigentlich der Veranschaulichung dass Vue ein einzelner Datenfluss ist, das V-Modell ist nur syntaktischer Zucker.
<input v-model="haorooms" /> <input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />
Die erste Codezeile ist eigentlich nur syntaktischer Zucker für die zweite Zeile. Dann kann die zweite Codezeile wie folgt abgekürzt werden:
<input :value="haorooms" @input="haorooms= $event.target.value" />
Mit anderen Worten,
<input v-model="haorooms" />
kann auch als
<input :value="haorooms" @input="haorooms= $event.target.value" />
v- geschrieben werden. Modell in der Komponente Mit
ist zurück zu unserer ursprünglichen Frage? Wie kommuniziert das V-Modell zwischen übergeordneten und untergeordneten Komponenten in Vue? Wie verwende ich es in Komponenten? Wenn Sie mein Beispiel oben verstehen, können wir das V-Modell problemlos in Komponenten verwenden.
Der Code der übergeordneten Komponente lautet wie folgt:
<template>
<p id="demo">
<test-model v-model="haorooms"></test-model>
<span>{{haorooms}}</span>
</p>
</template>
<script>
import testModel from 'src/components/testModel'
export default {
data(){
return{
haorooms: "haorooms"
}
},
components: {
testModel,
}
}
</script>
<style lang="scss" scoped>
</style>Der Code der Unterkomponente lautet wie folgt:
<template>
<span>
<input
ref="input"
:value="value"
@input="$emit('balabala', $event.target.value)"
>
</span>
</template>
<script>
export default {
data(){
return{
}
},
props: ["value"],
model: {
prop: 'value',
event: 'balabala'
}
}
</script>
<style lang="scss" scoped>
</style>Wir können den obigen Code verwenden, um den Wert der übergeordneten Komponente zu ändern Komponenten-V-Modell-Bindung durch die Unterkomponente!
Der Implementierungs-Screenshot lautet wie folgt:
Nachteile und Lösungen des V-Modells
V-Modell ist beim Erstellen allgemeiner Komponenten wie Kontrollkästchen oder Optionsfelder nicht einfach zu verwenden.
<input type="checkbox" v-model="haorooms" />
Wir können es auf folgende Weise lösen:
<input type="checkbox" :checked="status" @change="status = $event.target.checked" />
Die übergeordnete Komponente kann wie folgt geschrieben werden:
<my-checkbox v-model="haorooms"></my-checkbox>
Untergeordnete Komponente:
<input
type="checkbox"
<!--这里就不用 input 了，而是 balabala-->
@change="$emit('balabala', $event.target.checked)"
:checked="value"
/>
export default {
data(){
return{
}
},
props: ['checked'], //这里就不用 value 了，而是 checked
model: {
prop: 'checked',
event: 'balabala'
},
}Die Oben habe ich für alle zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.
Verwandte Artikel:
So implementieren Sie einen benutzerdefinierten Ereignismechanismus mit Javascript
Detaillierte Interpretation der Kartendatenstruktur in Javascript
So entwickeln Sie einen zweidimensionalen Wochenansichtskalender mit Javascript
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das V-Modell in Vue, um die Kommunikation zwischen Eltern-Kind-Komponenten zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
