Welche Methoden gibt es zur Implementierung der bidirektionalen Bindung in Vue?

Vue implementiert eine bidirektionale Bindung: 1. Verwenden Sie die V-Model-Anweisung, um die Bindung auf der benutzerdefinierten Komponente zu implementieren, was der Übergabe der modelValue-Requisite und dem Empfang des ausgelösten update:modelValue-Ereignisses entspricht. Das Better-Sync-Plugin implementiert die Bindung 3. Verwenden Sie den Modifikator v-bind.sync. Die Syntax lautet „“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Mehrere Möglichkeiten zur Implementierung der bidirektionalen Bindung in Vue

1. V-Modell-Direktive

<childcomponent></childcomponent>

<!-- 是以下的简写: -->

<childcomponent></childcomponent>

Wenn Sie den Eigenschafts- oder Ereignisnamen in einen anderen Namen ändern möchten, müssen Sie model Optionen: <code>model 选项：

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以，在这个例子中 v-model 是以下的简写：

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

在 Vue 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Vue3 可以绑定多个v-model, 例如：<ChildComponent v-model:title="pageTitle" v-model:name="pageName" />

2、vue-better-sync 插件

有需求如此：开发一个 Prompt 组件，要求同步用户的输入，点击按钮可关闭弹窗。

一般我们会这样做：

<template>
  <div v-show="_visible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="_answer" />
    </div>
    <div>
      <button @click="_visible = !_visible">确认</button>
      <button @click="_visible = !_visible">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: &#39;prompt&#39;,
  
  props: {
    answer: String,
    visible: Boolean
  },
  
  computed: {
    _answer: {
      get() {
        return this.answer
      },
      set(value) {
        this.$emit(&#39;input&#39;, value)
      }
    },
    _visible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit(&#39;update:visible&#39;, value)
      }
    }
  }
}
</script>

写一两个组件还好，组件规模一旦扩大，写双向绑定真能写出毛病来。于是，为了解放生产力，有了 vue-better-sync 这个轮子，且看用它如何改造我们的 Prompt 组件：

<template>
  <div v-show="actualVisible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="actualAnswer" />
    </div>
    <div>
      <button @click="syncVisible(!actualVisible)">确认</button>
      <button @click="syncVisible(!actualVisible)">取消</button>
    </div>
  </div>
</template>

<script>
import VueBetterSync from &#39;vue-better-sync&#39;

export default {
  name: &#39;prompt&#39;,
  
  mixins: [
    VueBetterSync({
      prop: &#39;answer&#39;, // 设置 v-model 的 prop
      event: &#39;input&#39; // 设置 v-model 的 event
    })
  ],
  
  props: {
    answer: String,
    visible: {
      type: Boolean,
      sync: true // visible 属性可用 .sync 双向绑定
    }
  }
}
</script>

vue-better-sync 统一了 v-model 和 .sync 传递数据的方式，你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可将新数据传递给父组件。

GitHub：fjc0k/vue-better-sync

3、使用 v-bind.sync修饰符

在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此，我们建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：

this.$emit('update:title', newValue)

如果需要的话，父级可以监听该事件并更新本地 data property。例如：

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<ChildComponent :title.sync="pageTitle" />

vue3 移除.syncrrreeerrreee

In diesem Beispiel ist das V-Modell also eine Abkürzung für:

In Vue 3.x entspricht das V-Modell einer benutzerdefinierten Komponente der Übergabe des modelValue prop und empfangen Sie das ausgelöste update:modelValue-Ereignis: rrreee

2. Besser synchronisierendes Plug-in🎜🎜Dafür besteht Bedarf: Entwickeln Sie eine Prompt-Komponente, die eine Synchronisierung der Benutzereingaben erfordert und auf die Schaltfläche klickt, um das Popup-Fenster zu schließen. 🎜🎜🎜🎜Allgemein Wir werden Folgendes tun: 🎜rrreee🎜Es ist in Ordnung, eine oder zwei Komponenten zu schreiben, aber sobald die Größe der Komponente zunimmt, kann das Schreiben einer bidirektionalen Bindung 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: 🎜rrreee🎜vue-better-sync vereinheitlicht die Art und Weise, wie V-Model und .sync Daten übertragen . Sie benötigen nur This.actual${PropName} = newValue oder this.sync${PropName}(newValue), um neue Daten an die übergeordnete Komponente zu übergeben. 🎜🎜GitHub: fjc0k/vue-better-sync🎜🎜

🎜3. Verwenden Sie den Modifikator v-bind.sync🎜🎜🎜In einigen Fällen müssen wir möglicherweise eine bestimmte prop in beide Richtungen binden (zusätzlich zur vorherigen Bindung mit v- Modell Der Fall der Bestimmung von prop). Zu diesem Zweck empfehlen wir die Verwendung des Wurfereignisses update:myPropName. Beispielsweise können wir für die ChildComponent mit der Title-Requisite im vorherigen Beispiel die Absicht mitteilen, dem übergeordneten Element einen neuen Wert zuzuweisen, indem wir: 🎜rrreee🎜Das übergeordnete Element kann das Ereignis abhören und bei Bedarf die lokale Dateneigenschaft aktualisieren. Zum Beispiel: 🎜rrreee🎜Der Einfachheit halber können wir den .sync-Modifikator verwenden, um ihn wie folgt abzukürzen: 🎜rrreee🎜🎜vue3 Remove .sync🎜🎜🎜[Verwandte Empfehlung: 🎜vuejs Video-Tutorial 🎜、 🎜Web-Frontend-Entwicklung🎜】🎜

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zur Implementierung der bidirektionalen Bindung in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!