Le flux de données Vue est-il unidirectionnel ?

C’est un aller simple. Bien que Vue ait un "v-model" de liaison bidirectionnelle, le transfert de données entre les composants parent et enfant de Vue suit toujours un flux de données unidirectionnel. Le composant parent peut transmettre des accessoires au composant enfant, mais le composant enfant ne peut pas les modifier. props transmis par le composant parent, les composants enfants ne peuvent informer les composants parents des modifications de données que par le biais d'événements.

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

vue est un flux de données unidirectionnel. La direction du flux de données est de haut en bas, du composant parent au composant enfant.

Ne confondez pas avec la liaison de données bidirectionnelle de Vue ; la liaison de données bidirectionnelle fait référence à la relation de rendu entre la vue et le modèle, et non au flux de données.

Le transfert de données entre les composants parent et enfant de Vue suit ! un seul Pour le flux de données, le composant parent peut transmettre des accessoires au composant enfant, mais le composant enfant ne peut pas modifier les accessoires transmis par le composant parent. Le composant enfant ne peut informer le composant parent des modifications de données que par le biais d'événements.

1. Flux de données unidirectionnel :

Tous les accessoires forment une liaison descendante unidirectionnelle entre leurs accessoires parent et enfant : les mises à jour des accessoires parent seront transmises aux composants enfants, mais vice versa. Cela empêchera le composant enfant de modifier accidentellement l'état du composant parent, ce qui rendrait le flux de données de votre application difficile à comprendre.

De plus, chaque fois que le composant parent change, tous les accessoires du composant enfant seront actualisés avec les dernières valeurs. Cela signifie que vous ne devez pas modifier les accessoires à l'intérieur d'un composant enfant. Si vous faites cela, cela modifiera également l’état du composant parent.

2, Prop est passé par référence :

Notez que les objets et les tableaux sont transmis par référence en JavaScript, donc pour un prop de type tableau ou objet, changez l'objet dans le sous-composant Ou le tableau lui-même affectera le état du composant parent.

Compréhension approfondie du flux de données unidirectionnel de Vue

1 Le modèle V est utilisé sur les éléments d'entrée

Le modèle V est très similaire à la liaison bidirectionnelle lorsqu'il est utilisé (en fait...) , mais Vue est un flux de données unique, et le v-model n'est qu'un sucre syntaxique :

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

La première ligne de code n'est en fait qu'un sucre syntaxique pour la deuxième ligne. Ensuite, la deuxième ligne de code peut être abrégée comme ceci :

<input :value="something" @input="something = $event.target.value" />

Pour comprendre cette ligne de code, vous devez d'abord savoir que l'élément input lui-même a un événement oninput. Il s'agit d'un nouvel ajout à HTML5, similaire à onchange. le contenu de la zone de saisie change, Oninput sera déclenché et la dernière valeur sera transmise à quelque chose via $event.

Nous observons attentivement les deux lignes de code du sucre de syntaxe et de la syntaxe originale, et nous pouvons tirer une conclusion : lors de l'ajout de l'attribut v-model à l'élément d'entrée, la valeur sera utilisée comme attribut de l'élément par défaut , et l'événement « entrée » sera utilisé comme événement déclencheur de valeur de passage en temps réel

2. Le modèle V est utilisé sur les composants

Le modèle V peut être utilisé non seulement sur les entrées, mais également sur les composants. . Jetez un œil à la démo sur le site officiel.

<currency-input v-model="price"></currency-input>
Vue.component(&#39;currency-input&#39;, {
  template: &#39;\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  &#39;,
  props: [&#39;value&#39;], // 为什么这里要用 value 属性，value在哪里定义的？
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexOf(&#39;.&#39;) === -1
            ? value.length
            : value.indexOf(&#39;.&#39;) + 3
        )
      // 如果值尚不合规，则手动覆盖为合规的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件带出数值
      // <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
      this.$emit(&#39;input&#39;, Number(formattedValue))
    }
  }
})

Si vous connaissez les réponses à ces deux questions, alors félicitations pour avoir vraiment maîtrisé le v-model. Si vous ne comprenez pas, vous pouvez jeter un œil à ce code :

<currency-input v-model="price"></currency-input>
所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

Donc, lors de l'ajout de l'attribut v-model. à un composant, par défaut, la valeur sera utilisée comme propriété du composant et la valeur « entrée » sera utilisée comme nom d'événement lors de la liaison des événements au composant. Ceci est particulièrement utile lors de l’écriture de composants.

3. Inconvénients et solutions du v-model

Lors de la création de composants courants comme des cases à cocher ou des boutons radio, le v-model n'est pas facile à utiliser.

<input type="checkbox" v-model="something" />

v-model nous fournit l'attribut value et l'événement oninput. Cependant, ce dont nous avons besoin n'est pas l'attribut value, mais l'attribut vérifié. Et lorsque vous cliquez sur ce bouton radio, l'événement oninput ne sera pas déclenché, il le sera. Déclenchez uniquement l'événement onchange.

Étant donné que le modèle v n'est utilisé que sur les éléments d'entrée, cette situation est facile à résoudre :

<input type="checkbox" :checked="value" @change="change(value, $event)"

Lorsque le modèle v est utilisé sur les composants :

<checkbox v-model="value"></checkbox>

Vue.component(&#39;checkbox&#39;, {
  tempalte: &#39;<input type="checkbox" @change="change" :checked="currentValue"/>&#39;
  props: [&#39;value&#39;],
  data: function () {
        return {
            //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
            currentValue: this.value
        };
    },
  methods: {
    change: function ($event) {
      this.currentValue = $event.target.checked;
      this.$emit(&#39;input&#39;, this.currentValue);  
    }
})

Dans la version Vue 2.2, vous pouvez passer lors de la définition de l'option de modèle de composants pour personnaliser l'accessoire/l'événement.

4. Flux de données des composants Vue

D'après l'analyse du modèle V ci-dessus, nous pouvons comprendre que la liaison de données bidirectionnelle ajoute des modifications aux éléments d'entrée (input, textare, etc.) en fonction d'une liaison unidirectionnelle. (input) événement pour modifier dynamiquement le modèle et la vue, c'est-à-dire en déclenchant ($emit) l'événement du composant parent pour modifier le mv pour obtenir l'effet de mvvm. Le transfert de données entre les composants Vue est unidirectionnel, c'est-à-dire que les données sont toujours transmises du composant parent au composant enfant. Le composant enfant peut avoir ses propres données gérées en interne, mais il n'a pas le droit de modifier les données. transmis par le composant parent. Lors du développement. Lorsque l'utilisateur essaie de faire cela, vue signalera une erreur. Ceci est fait pour un meilleur découplage entre les composants. Au cours du développement, il peut y avoir plusieurs sous-composants qui dépendent de certaines données du composant parent. Si le sous-composant peut modifier les données du composant parent, un changement dans le sous-composant. déclenchera toutes les données qui dépendent de ces données. Le composant enfant change, donc. Vue ne recommande pas aux composants enfants de modifier les données du composant parent. La modification directe des accessoires générera un avertissement. L'organigramme est le suivant :

Donc, lorsque vous souhaitez modifier des accessoires dans un composant enfant, utilisez le composant enfant comme composant parent, il y a donc

• 1 Définissez une variable locale et initialisez-la avec la valeur de prop.
• 2. Définissez une propriété calculée, traitez la valeur de l'accessoire et renvoyez-la.

【Recommandations associées : 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!