Heim > Artikel > Web-Frontend > Zusammenfassung der bidirektionalen Bindungsmethoden in Vue
Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Implementierung der bidirektionalen Bindung von Vue vorstellen sehen.
<input v-model="text" />
Das obige Beispiel ist nur ein syntaktischer Zucker, erweitert zu :
<input :value="text" @input="e => text = e.target.value" />
<my-dialog :visible.sync="dialogVisible" />
Dies ist auch ein Syntax-Zucker, abgeschält lautet er:
<my-dialog :visible="dialogVisible" @update:visible="newVisible => dialogVisible = newVisible" />
My-Dialog-Komponente kann this.$emit('update:visible', newVisible)
bei sichtbaren Änderungen verwendet werden.
Vue ermöglicht die Definition benutzerdefinierter Komponenten nach Version 2.2.0 s V-Modell, was dazu führt, dass bei der Implementierung des V-Modells in JSX/Rendering-Funktionen unterschiedliche Konfigurationen von Komponenten berücksichtigt werden müssen, was nicht immer der Fall sein kann (wenn das Modell der my-dialog-Komponente { prop: 'sichtbar', Ereignis: 'ändern' }):
{ render(h) { return h('my-dialog', { props: { value: this.dialogVisible }, on: { input: newVisible => this.dialogVisible = newVisible } }) } }
Dies sollte der Fall sein:
{ render(h) { return h('my-dialog', { props: { visible: this.dialogVisible }, on: { change: newVisible => this.dialogVisible = newVisible } }) } }
Allerdings können Sie bei Verwendung des Modellattributs seine Requisite und sein Ereignis vollständig ignorieren:
{ render(h) { return h('my-dialog', { model: { value: this.dialogVisible, callback: newVisible => this.dialogVisible = newVisible } }) } }
So verwendet in JSX:
{ render() { return ( <my-dialog {...{ model: { value: this.dialogVisible, callback: newVisible => this.dialogVisible = newVisible } }} /> ) } }
<template> <p v-show="_visible"> <p>完善个人信息</p> <p> <p>尊姓大名?</p> <input v-model="_answer" /> </p> <p> <button @click="_visible = !_visible">确认</button> <button @click="_visible = !_visible">取消</button> </p> </p> </template> <script> export default { name: 'prompt', props: { answer: String, visible: Boolean }, computed: { _answer: { get() { return this.answer }, set(value) { this.$emit('input', value) } }, _visible: { get() { return this.visible }, set(value) { this.$emit('update:visible', value) } } } } </script>Ein oder zwei Komponenten zu schreiben ist in Ordnung, aber sobald die Größe der Komponente erweitert ist, schreiben wir in beide Richtungen Bindung kann wirklich Probleme verursachen. Um die Produktivität zu steigern, haben wir das Vue-Better-Sync-Rad. Sehen wir uns an, wie es zur Transformation unserer Prompt-Komponente verwendet werden kann:
<template> <p v-show="actualVisible"> <p>完善个人信息</p> <p> <p>尊姓大名?</p> <input v-model="actualAnswer" /> </p> <p> <button @click="syncVisible(!actualVisible)">确认</button> <button @click="syncVisible(!actualVisible)">取消</button> </p> </p> </template> <script> import VueBetterSync from 'vue-better-sync' export default { name: 'prompt', mixins: [ VueBetterSync({ prop: 'answer', // 设置 v-model 的 prop event: 'input' // 设置 v-model 的 event }) ], props: { answer: String, visible: { type: Boolean, sync: true // visible 属性可用 .sync 双向绑定 } } } </script>
vue-better-sync vereint V-Model und .sync Um Daten zu übertragen, müssen Sie lediglich
oderneue Daten an die übergeordnete Komponente übergeben.
GitHub: fjc0k/vue-better-sync this.actual${PropName} = newValue
this.sync${PropName}(newValue)
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Schritte zum Aktivieren des aktuellen Routings mit Vuenodejs generiert QR-Code ( das einfachste)
Das obige ist der detaillierte Inhalt vonZusammenfassung der bidirektionalen Bindungsmethoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!