Wie implementiert man eine bidirektionale Bindung in Vue, ohne das V-Modell zu verwenden? Im folgenden Artikel erfahren Sie, wie Sie eine bidirektionale Bindung ohne Verwendung des V-Modells erreichen. Ich hoffe, er wird Ihnen helfen!
Manche Leute sagen: Haben Sie den Mut, so eine Anfängerfrage zu stellen?
Erzähl mir nicht, als ich Vue zum ersten Mal lernte, musste ich in den sauren Apfel beißen und laut der offiziellen Website-Dokumentdemo auch viele Fehler im Zusammenhang schreiben Später, nachdem ich mich entschlossen hatte, es sorgfältig zu studieren, stellte ich fest, dass es noch viele Möglichkeiten gibt, es im Detail zu erklären. [Verwandte Empfehlungen: vue.js Video-Tutorial]
Schauen wir uns zuerst die Antwort an:
<template>
<div class="test-v-model">
<p>使用v-model</p>
<input v-model="msg" placeholder="edit me" />
<p>{{ msg }}</p>
<p>不使用v-model</p>
<input :value="msg1" @input="handleInput" placeholder="edit me" />
<p>{{ msg1 }}</p>
</div>
</template>
<script>
export default {
name: 'test-v-model',
data() {
return {
msg: '',
msg1: ''
}
},
methods: {
handleInput(e) {
this.msg1 = e.target.value
}
}
}
</script>Wenn Sie kein V-Modell verwenden, müssen Sie den Wert über das Wertattribut binden und ändern Der Bindungswert wird durch das Eingabeereignis erreicht, um eine bidirektionale Bindung zu erreichen.
Mit anderen Worten, das V-Modell ist nur eine Kurzform
Tatsächlich ist das Wesen des V-Modells syntaktischer Zucker. Es ist dafür verantwortlich, Benutzereingabeereignisse abzuhören, um Daten zu aktualisieren und für einige spezielle Verarbeitungen durchzuführen Extremszenarien. – Offizielle Dokumentation
v-model verwendet intern verschiedene Eigenschaften und löst unterschiedliche Ereignisse für verschiedene Eingabeelemente aus:
- Text- und Textarea-Elemente verwenden die Eigenschaft
valueund die EigenschaftinputEreignis;valueproperty 和input事件；- checkbox 和 radio 使用
checkedproperty 和change事件；- select 字段将
value作为 prop 并将change作为事件。
问：什么是双向绑定？
双向绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据也会更新。
问：什么是单向数据绑定?
单向数据绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据不会更新。
在vue中是通过指令 v-model 来实现双向绑定，通过 v-bindcheckbox und Radio verwenden checked-Eigenschaft und change-Ereignis
value</li> code> sein als Requisite und <code>change als Ereignis. 
Zwei-Wege-Bindung
vue Einseitiger Datenfluss für Interaktionen zwischen Komponenten
F: Was ist eine bidirektionale Bindung?Zwei-Wege-Bindung bedeutet, dass die Ansicht synchron aktualisiert wird, wenn sich die Daten ändern, und wenn sich die Ansicht ändert, werden auch die Daten aktualisiert.
Eine unidirektionale Datenbindung bedeutet, dass die Ansicht synchron aktualisiert wird, wenn sich die Ansicht ändert.F: Was ist eine unidirektionale Datenbindung?
Nachdem Sie den folgenden Code und die GIF-Demonstration dieses Codes gelesen haben, werden Sie in der Lage sein, ihre Unterschiede zu verstehen.In Vue geschieht dies über den Befehl v-model, um eine bidirektionale Bindung zu erreichen, und
v-bind, um eine unidirektionale Bindung zu erreichen Datenbindung
<template> <div> <p>双向绑定</p> <input v-model="msg" placeholder="edit me" /> <p>{{ msg }}</p> <p>单向数据绑定</p> <input v-bind:value="msg1" placeholder="edit me" /> <p>{{ msg1 }}</p> </div> </template> <script> export default { name: 'test-v-model', data() { return { msg: '', msg1: '' } } } </script>Nach dem Login kopierenWie Sie dem GIF entnehmen können, wird bei Verwendung des V-Modells die Ansicht synchron aktualisiert. Wenn sich die Ansicht ändert, werden auch die Daten aktualisiert.
Wenn sich die Daten ändern, wird die Ansicht synchron aktualisiert. Wenn sich die Ansicht ändert, werden die Daten nicht aktualisiert.
F: Was ist der unidirektionale Datenfluss von Vue?
<template>
<child-component :value="fatherValue" />
</template>
<script>
import ChildComponent from './child.vue'
export default {
name: 'father-component',
components: {
ChildComponent
},
data() {
return {
fatherValue: ''
}
}
}
</script><template>
<div class="child-component">
<input v-model="value" placeholder="edit me" />
<p>{{ value }}</p>
</div>
</template>
<script>
export default {
name: 'child-component',
props: {
value: {
type: String,
default: ''
}
}
}
</script>
可以看到，childComponent中的 prop 值可以实现双向绑定，但是 FatherComponent 中的 data 值并未发生改变，而且控制台抛出了警告：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
翻译一下：避免直接改变 prop 值，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于 prop 值的 data 或 computed。
很显然，直接改变子组件的 prop 值的这种行为被 vue 禁止了。
如何操作传入子组件的 prop 值
但是很多时候，我们确实要操作传入子组件的 prop 值，该怎么办呢？
正如上面的警告所说，有两种办法：
props: {
initialCounter: {
type: Number,
default: 0
},
},
data() {
return {
counter: this.initialCounter
}
}props: {
size: {
type: String,
default: ''
}
},
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}这样不管怎么操作数据都是操作的子组件数据了，不会影响到父组件数据。
所以，我们想用 prop 传入的数据实现双向绑定，可以这么写：
父组件代码不变
子组件里用 innerValue 来接收传入的 value ：
<template>
<div class="child-component">
<input v-model="innerValue" placeholder="edit me" />
<p>{{ innerValue }}</p>
</div>
</template>
<script>
export default {
name: 'child-component',
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
innerValue: this.value
}
}
}
</script>这里要注意一个问题
在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
还是上面的例子，我们将传入的值改为对象：
父组件代码：
<template>
<child-component :obj="fatherObj" />
</template>
<script>
import ChildComponent from './child.vue'
export default {
name: 'father-component',
components: {
ChildComponent
},
data() {
return {
fatherObj: {
name: 'lin'
}
}
}
}
</script>子组件代码：
<template>
<div class="child-component">
<input v-model="innerObj.name" placeholder="edit me" />
<p>{{ innerObj.name }}</p>
</div>
</template>
<script>
export default {
name: 'child-component',
props: {
obj: {
type: Object,
default: () => {}
}
},
data() {
return {
innerObj: this.obj
}
}
}
</script>
这里的 this.obj 是引用类型，赋值给了 innerObj，所以 innerObj 实际上还是指向了父组件的数据，对 innerObj.name 的修改依然会影响到父组件
所以，处理这种引用类型数据的时候，需要深拷贝一下
import { clone } from 'xe-utils'
export default {
name: 'child-component',
props: {
obj: {
type: Object,
default: () => {}
}
},
data() {
return {
innerObj: clone(this.obj, true)
}
}
}
如上图所示，这样子组件和父组件之间的数据就不会互相影响了。
至此，终于把双向绑定和单向数据流讲清楚了，真的没想到，平时开发时都懂的概念，想讲清楚居然花了这么多篇幅，确实不容易，不过，这也是对自己的一种锻炼吧。
问：v-model是双向绑定吗？
是，但只是语法糖
问：v-model是单向数据流吗？
是，数据向下，事件向上
本题还有一些其他问法，比如：
看完本篇文章，相信不管怎么问，你都能对这两个概念理解透彻了。
更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie man eine bidirektionale Bindung in Vue implementiert, ohne das V-Modell zu verwenden.. 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)
