Quelles sont les méthodes d'implémentation de la liaison bidirectionnelle dans Vue ?

Vue implémente la liaison bidirectionnelle : 1. Utilisez l'instruction v-model pour implémenter la liaison. Le v-model sur le composant personnalisé équivaut à transmettre la prop modelValue et à recevoir l'événement update:modelValue lancé. Le plug-in Better-Sync implémente la liaison ; 3. Utilisez le modificateur v-bind.sync, la syntaxe est "".

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Plusieurs façons d'implémenter la liaison bidirectionnelle dans Vue

1. Directive v-model

<childcomponent></childcomponent>

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

<childcomponent></childcomponent>

Si vous souhaitez changer le nom de la propriété ou de l'événement en un autre nom, vous devez ajouter model Options : <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

Donc, dans cet exemple, v-model est un raccourci pour :

rrreee

Dans Vue 3.x, v-model sur un composant personnalisé équivaut à passer le modelValue prop et recevez l'événement update:modelValue lancé : rrreee

Vue3 peut lier plusieurs v-model, par exemple : <childcomponent v-model:title="pageTitle" v-model:name="pageName"></childcomponent>🎜🎜

2. plug-in de meilleure synchronisation 🎜🎜Il existe une demande pour cela : développez un composant Prompt qui nécessite la synchronisation des entrées de l'utilisateur et clique sur le bouton pour fermer la fenêtre contextuelle. 🎜🎜🎜🎜Général Nous allons faire ceci : 🎜rrreee🎜C'est bien d'écrire un ou deux composants, mais une fois que la taille du composant augmente, l'écriture d'une liaison bidirectionnelle peut vraiment causer des problèmes. Ainsi, afin de libérer la productivité, nous avons la roue vue-better-sync Voyons comment elle peut être utilisée pour transformer notre composant Prompt : 🎜rrreee🎜vue-better-sync unifie la façon dont v-model et .sync transfèrent les données. . Vous avez seulement besoin de This.actual${PropName} = newValue ou this.sync${PropName}(newValue) pour transmettre de nouvelles données au composant parent. 🎜🎜GitHub : fjc0k/vue-better-sync🎜🎜

🎜3. Utilisez le modificateur v-bind.sync🎜🎜🎜Dans certains cas, nous pouvons avoir besoin de "lier dans les deux sens" un certain prop (en plus de la liaison précédente avec v- modèle Le cas de la détermination de l'accessoire). À cette fin, nous vous recommandons d'utiliser l'événement de lancement update:myPropName. Par exemple, pour le ChildComponent avec le prop title dans l'exemple précédent, nous pouvons communiquer l'intention d'attribuer une nouvelle valeur au parent en : 🎜rrreee🎜Le parent peut écouter l'événement et mettre à jour la propriété de données locales si nécessaire. Par exemple : 🎜rrreee🎜Pour plus de commodité, nous pouvons utiliser le modificateur .sync pour l'abréger comme suit : 🎜rrreee🎜🎜vue3 Supprimer .sync🎜🎜🎜[Recommandation associée : 🎜Tutoriel vidéo vuejs 🎜、 🎜développement web front-end🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!