Vous amène à avoir une compréhension approfondie du v-model dans vue2 et à voir comment faire en sorte que les composants prennent en charge cette syntaxe

Cet article vous amènera à comprendre le v-model dans vue2, à voir si le v-model est une liaison bidirectionnelle ou un flux de données unidirectionnel, et comment faire en sorte que les composants que vous développez prennent en charge le v-model. J'espère que cela vous sera utile. à tout le monde.

Lisez cet article

Vous allez :

• Comprendre : Qu'est-ce que le sucre syntaxique de v-model ? Quel traitement spécial vue2 effectue-t-il pour les composants natifs ?
v-model 是什么的语法糖？ vue2 对原生组件究竟做了什么特殊处理？
• 弄明白： v-model 到底是单向数据流还是数据双向绑定？
• 弄明白： v-model 在语法糖之外的『副作用』？
• 学会如何让你的组件也支持 v-model 语法。

一、v-model 的本质是语法糖。

『v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。』 -- 官方文档。【相关推荐：vue.js教程】

什么是语法糖？

语法糖，简单来说就是『便捷写法』。

在大部分情况下， v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"；

<!-- 在大部分情况下，以下两种写法是等价的 -->
<el-input v-model="foo" />

<el-input :value="foo" @input="foo = $event" />

没错，在大部分情况下如此。

但也有例外：

• vue2 给组件提供了 model 属性，可以让用户自定义传值的prop名和更新值的事件名。这个暂且略过，第四节会细说。

• 对于原生 html 原生元素，vue 干了大量『脏活儿』，目的是为了能让我们忽视 html 在api上的差异性。以下元素的左右两种写法是等价的：

• textarea 元素：

• select 下拉框：

• input type='radio' 单选框：

• input type='checkbox' 多选框：

在编程思想上，这种帮助使用者『隐藏细节』的方式叫封装。

二、v-model 仅仅是语法糖吗？(冷知识)

v-model 不仅仅是语法糖，它还有副作用。

副作用如下：如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。

举个例子，看下面的代码：

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: &#39;公众号: 前端要摸鱼&#39;,
      }
    }
  }
}

响应式数据中没有定义 user.tel 属性，但是 template 里却用 v-model 绑定了 user.tel，猜一猜当你输入时会发生什么？

看效果：

揭晓答案吧：user 上会新增 tel 属性，并且 tel 这个属性还是响应式的。

这就是『副作用』带来的效果，你学会了吗？

三、 v-model 是双向绑定还是单向数据流？

2.1 v-model 是双向绑定吗？

是，官方说是。

『你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。』 —— vue2官方文档

2.2 那 v-model 是单向数据流吗？

是的，它甚至是单向数据流的典型范式。

虽然官方没有明确表示这点，但我们可以捋一捋两者的关系。

• 什么是单项数据流？

子组件不能改变父组件传递给它的 prop 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。

• v-model 的做法是怎样的？

v-modelDécouvrez : le v-model un flux de données unidirectionnel ou une liaison de données bidirectionnelle ?

Découvrez : quels sont les "effets secondaires" du v-model au-delà du sucre syntaxique ? 🎜Découvrez comment faire en sorte que vos composants prennent également en charge la syntaxe v-model.

1. L'essence du v-model est du sucre syntaxique. 🎜

🎜『v-model n'est essentiellement que du sucre syntaxique. Il est chargé d'écouter les événements d'entrée de l'utilisateur pour mettre à jour les données et effectuer un traitement spécial pour certains scénarios extrêmes. 』 --Documentation officielle. [Recommandations associées : tutoriel vue.js]🎜

🎜Qu'est-ce que le sucre syntaxique ? 🎜

🎜Le sucre syntaxique, en termes simples, est une « écriture pratique ». 🎜

🎜Dans la plupart des cas, v-model="foo" est équivalent à :value="foo" plus @input= "foo = $event" ; 🎜

// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}

🎜Oui, dans la plupart des cas. 🎜🎜Mais il y a des exceptions : 🎜

🎜🎜vue2 fournit l'attribut model pour le composant, permettant aux utilisateurs pour personnaliser Définissez le nom de l'accessoire de la valeur transmise et le nom de l'événement de la valeur mise à jour. Je vais ignorer cela pour l'instant et j'entrerai dans les détails dans la section 4. 🎜🎜🎜Pour les éléments natifs html, vue a fait beaucoup de "sale boulot" afin de nous faire ignorer le html</ code> Différences dans l'API. Les méthodes d'écriture gauche et droite des éléments suivants sont équivalentes : 🎜</li>🎜<code>textarea Élément :

🎜🎜🎜🎜sélectionner :< /li> 🎜 🎜🎜🎜input type='radio' Bouton radio : 🎜🎜🎜🎜input type='checkbox' Case à cocher multiple : 🎜🎜🎜 En termes de programmation, cette façon d'aider les utilisateurs à "masquer les détails" est appelée encapsulation. 🎜

2. Le modèle V n'est-il que du sucre syntaxique ? (Anecdote) 🎜

🎜v-model n'est pas seulement du sucre syntaxique, il a aussi des effets secondaires. 🎜

🎜Les effets secondaires sont les suivants : Si v-model est lié à une propriété inexistante sur l'objet réactif, alors vue le fera Ajoutez tranquillement cette propriété et rendez-la réactive. 🎜🎜Par exemple, regardez le code suivant : 🎜

// 默认的 model 属性
export default {
  model: {
    prop: 'ame',
    event: 'zard'
  }
}

🎜L'attribut user.tel n'est pas défini dans les données réactives, mais est utilisé dans le <code>template< /code> >v-model est lié à user.tel. Devinez ce qui se passe lorsque vous entrez ? 🎜🎜Voir l'effet :
🎜🎜🎜🎜Révélez la réponse : tel sera ajouté à user, et tel sera toujours responsive Formules. 🎜🎜C'est l'effet des « effets secondaires », l'avez-vous appris ? 🎜

3. v-model est-il une liaison bidirectionnelle ou un flux de données unidirectionnel ? 🎜

2.1 v-model est-il une liaison bidirectionnelle ?

🎜Oui, le responsable a dit oui. 🎜

🎜『Vous pouvez utiliser la directive v-model sous les formes <input>, <textarea> et <select>< /code > Créer une liaison de données bidirectionnelle sur l'élément. 』——document officiel vue2🎜

2.2 Le v-model est-il un flux de données unidirectionnel ?

🎜Oui, c'est même un paradigme typique pour le flux de données unidirectionnel. 🎜

🎜Bien que le responsable ne l'ait pas explicitement déclaré, nous pouvons comprendre la relation entre les deux. 🎜🎜🎜Qu'est-ce qu'un flux de données unique ? 🎜Un composant enfant ne peut pas modifier l'attribut prop qui lui est transmis par le composant parent. L'approche recommandée consiste à lancer un événement et à notifier au composant parent de modifier l'attribut. valeur liée à elle seule. 🎜🎜🎜Comment fonctionne le v-model ? 🎜v-model L'approche est totalement cohérente avec un flux de données unique. Il fournit même une norme pour la dénomination et la définition des événements. 🎜

众所周知 .sync 修饰符是单向数据流的另一个典型范式。

『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。

四、如何让你开发的组件支持 v-model

虽然不想说，但这确实是高频面试题。

在定义 vue 组件时，你可以提供一个 model 属性，用来定义该组件以何种方式支持 v-model。

model 属性本身是有默认值的，如下：

// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}

也就是说，如果你不定义 model 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"。

如果把 model 属性进行一些改装，如下：

// 默认的 model 属性
export default {
  model: {
    prop: 'ame',
    event: 'zard'
  }
}

那么，v-model="foo" 就等价于 :ame="foo" 加上 @zard="foo = $event"。

没错，就是这么容易，让我们看个例子。

先定义一个自定义组件：

<template>
<div>
  我们是TI{{ ame }}冠军
  <el-button @click="playDota2(1)">加</el-button>
  <el-button @click="playDota2(-1)">减</el-button>
</div>
</template>
<script>
export default {
  props: {
    ame: {
      type: Number,
      default: 8
    }
  },
  model: { // 自定义v-model的格式
    prop: &#39;ame&#39;, // 代表 v-model 绑定的prop名
    event: &#39;zard&#39; // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit(&#39;zard&#39;, newYear)
    }
  }
}
</script>

然后我们在父组件中使用该组件：

// template中
<dota v-model="ti"></dota>
// script中
export default {
  data() {
    return {
      ti: 8
    }
  }
}

看看效果：

让你的组件支持 v-model 就这么容易。

五、demo和源码

获取源码请访问github 

https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model

更多编程相关知识，请访问：编程视频！！

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!