Lassen Sie uns darüber sprechen, wie man eine bidirektionale Bindung in Vue implementiert, ohne das V-Modell zu verwenden.

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!

Wie erreicht man eine bidirektionale Bindung ohne Verwendung des V-Modells?

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: &#39;test-v-model&#39;,
  data() {
    return {
      msg: &#39;&#39;,
      msg1: &#39;&#39;
    }
  },
  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 value und die Eigenschaft input Ereignis;
value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

与本题相关联的知识延伸

• 双向绑定
• 单向数据绑定
• vue 组件之间交互的单向数据流

问：什么是双向绑定？

双向绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据也会更新。

问：什么是单向数据绑定?

单向数据绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据不会更新。

在vue中是通过指令 v-model 来实现双向绑定，通过 v-bindcheckbox und Radio verwenden checked-Eigenschaft und change-Ereignis

select-Feld wird value code> sein als Requisite und <code>change als Ereignis.

Wissenserweiterung zu dieser Frage

Zwei-Wege-Bindung

Einseitige Datenbindung

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.

F: Was ist eine unidirektionale Datenbindung?

Eine unidirektionale Datenbindung bedeutet, dass die Ansicht synchron aktualisiert wird, wenn sich die Ansicht ändert.

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

Nachdem Sie den folgenden Code und die GIF-Demonstration dieses Codes gelesen haben, werden Sie in der Lage sein, ihre Unterschiede zu verstehen.

<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: &#39;test-v-model&#39;,
  data() {
    return {
      msg: &#39;&#39;,
      msg1: &#39;&#39;
    }
  }
}
</script>

Wie 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?

Eine untergeordnete Komponente kann das von der übergeordneten Komponente an sie übergebene prop-Attribut nicht ändern. Der empfohlene Ansatz besteht darin, ein Ereignis auszulösen und die übergeordnete Komponente zu benachrichtigen, den gebundenen Wert selbst zu ändern.

Zusammenfassend lässt sich sagen, dass die Daten sinken und die Ereignisse steigen.

Das Vue-Dokument stellt bei der Einführung von Prop das Konzept des unidirektionalen Datenflusses vor. 🎜Klicken Sie hier🎜, um die Beschreibung des unidirektionalen Datenflusses im Vue-Dokument anzuzeigen. 🎜🎜🎜Alle Requisiten bilden eine 🎜Einseitige Abwärtsbindung🎜 zwischen ihren übergeordneten und untergeordneten Requisiten: Aktualisierungen der übergeordneten Requisiten fließen nach unten zu den untergeordneten Komponenten, aber nicht umgekehrt. Dadurch wird verhindert, dass die untergeordnete Komponente versehentlich den Status der übergeordneten Komponente ändert, wodurch der Datenfluss Ihrer Anwendung schwer verständlich wird. 🎜🎜🎜🎜Darüber hinaus werden jedes Mal, wenn sich die übergeordnete Komponente ändert, alle Requisiten in der untergeordneten Komponente auf die neuesten Werte aktualisiert. Das bedeutet, dass Sie Requisiten innerhalb einer untergeordneten Komponente nicht ändern sollten. Wenn Sie dies tun, gibt Vue eine Warnung in der Konsole des Browsers aus. 🎜🎜🎜Sehen wir uns das folgende Beispiel an: 🎜🎜Was passiert, wenn eine Unterkomponente direkt eine bidirektionale Bindung für den Prop-Wert durchführt? 🎜🎜Code der übergeordneten Komponente: 🎜

<template>
  <child-component :value="fatherValue" />
</template>

<script>
import ChildComponent from &#39;./child.vue&#39;

export default {
  name: &#39;father-component&#39;,
  components: {
    ChildComponent
  },
  data() {
    return {
      fatherValue: &#39;&#39;
    }
  }
}
</script>

🎜Code der untergeordneten Komponente: 🎜

<template>
  <div class="child-component">
    <input v-model="value" placeholder="edit me" />
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: &#39;child-component&#39;,
  props: {
    value: {
      type: String,
      default: &#39;&#39;
    }
  }
}
</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 值，该怎么办呢？

正如上面的警告所说，有两种办法：

• 这个 prop 用来传递一个初始值，定义一个本地的 data property 并将这个 prop 用作其初始值

props: {
  initialCounter: {
    type: Number,
    default: 0
  },
},
data() {
  return {
    counter: this.initialCounter
  }
}

• 这个 prop 以一种原始的值传入且需要进行转换，用这个 prop 的值来定义一个计算属性

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: &#39;child-component&#39;,
  props: {
    value: {
      type: String,
      default: &#39;&#39;
    }
  },
  data() {
    return {
      innerValue: this.value
    }
  }
}
</script>

这里要注意一个问题

在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

还是上面的例子，我们将传入的值改为对象：

父组件代码：

<template>
  <child-component :obj="fatherObj" />
</template>

<script>
import ChildComponent from &#39;./child.vue&#39;

export default {
  name: &#39;father-component&#39;,
  components: {
    ChildComponent
  },
  data() {
    return {
      fatherObj: {
        name: &#39;lin&#39;
      }
    }
  }
}
</script>

子组件代码：

<template>
  <div class="child-component">
    <input v-model="innerObj.name" placeholder="edit me" />
    <p>{{ innerObj.name }}</p>
  </div>
</template>

<script>
export default {
  name: &#39;child-component&#39;,
  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是单向数据流吗？

是，数据向下，事件向上

本题还有一些其他问法，比如：

• vue 的双向绑定和单向数据流有什么区别？
• 为什么说 vue 的双向绑定和单向数据流不冲突？

看完本篇文章，相信不管怎么问，你都能对这两个概念理解透彻了。

更多编程相关知识，请访问：编程入门！！

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!