Comment faire fonctionner le transfert de données des composants parent-enfant de la classe de formulaire Vue

Cette fois, je vais vous montrer comment utiliser le transfert de données des composants parent-enfant de la classe de formulaire Vue et quelles sont les précautions lors de l'utilisation du transfert de données des composants parent-enfant de la classe de formulaire Vue. un cas pratique, jetons un coup d'oeil.

Si vous utilisez Vue.js pour le développement de projets, vous utiliserez inévitablement une méthode de développement basée sur les composants. Cette méthode apporte une certaine commodité au développement et à la maintenance, mais si elle implique un transfert de données et d'état, l'interaction est gênante. chose, surtout face à une page avec beaucoup de formulaires.

Ici, j'enregistrerai mes méthodes de traitement habituelles. Cet article enregistre principalement le transfert de données entre les composants parents et enfants qui sont principalement traités via Vuex. .

La même solution que celle donnée dans le document. Le composant parent transmet les données au composant enfant principalement via des accessoires, et le composant enfant transmet les données au composant parent principalement via le déclencheur $. submit(), juste dans l'utilisation, ce sera un peu différent.

1. Transmettre les données de type de base

Lorsque le sous-composant a moins de contenu, les données de type de base seront transmises directement, généralement String, Nombre , Booléen trois types.

Regardons d'abord un exemple :

<!-- 父组件 parent.vue -->
<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: '请输入姓名'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p class="child">
    <label>
      姓名：<input type="text" :value="currentValue" @input="changeName">
    </label>
  </p>
</template>
<script>
  export default {
    props: {
      // 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

Liez une méthode changeName à l'événement d'entrée du sous-composant Chaque fois que cette méthode est exécutée, l'entrée d'événement personnalisé sera. déclenché et transmettez-y la valeur de la zone de saisie.

Le composant parent lie une valeur via la directive v-model pour recevoir les données transmises par le composant enfant. Mais cela signifie uniquement que le composant parent répond aux données du composant enfant. Si vous souhaitez que le composant enfant réponde aux données transmises par le composant parent, vous devez définir une valeur d'attribut props pour le composant enfant, et cet attribut. doit avoir une valeur et ne peut pas être écrit avec d’autres mots.

v-model est en fait un sucre syntaxique. Pour plus de détails, veuillez vous référer au composant de saisie de formulaire utilisant des événements personnalisés.

2. Transmettre les données de type référence

Lorsqu'il y a beaucoup de contenu dans le sous-composant, par exemple, le sous-composant a plusieurs éléments de formulaire, s'il y en a encore. Si vous liez une valeur à chaque élément de formulaire comme ci-dessus, vous devrez écrire beaucoup de code répété. Donc, ce qui est habituellement transmis à ce moment-là est un objet. Le principe de base du passage de valeur reste le même, mais la méthode d'écriture sera légèrement différente.

Regardons d'abord le code :

<!-- 父组件 parent.vue -->
<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child :formData.sync="form"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </p>
</template>
<script>
  import child from './child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名',
          age: '21'
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p class="child">
    <label>
      姓名：<input type="text" v-model="form.name">
    </label>
    <label>
      年龄：<input type="text" v-model="form.age">
    </label>
    <label>
      地点：<input type="text" v-model="form.address">
    </label>
  </p>
</template>
<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
    props: {
      // 这个 prop 属性接收父组件传递进来的值
      formData: Object
    },
    watch: {
      // 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定
      // 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是单向数据流，通过触发 update 事件绑定 formData，
      // 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
      // 父组件在绑定 formData 的时候，需要加上 .sync
      this.$emit('update:formData', this.form)
    }
  }
</script>

props est un flux de données unidirectionnel Lorsque nous devons lier de manière bidirectionnelle les propriétés dans les accessoires, nous devons utiliser . sync Modificateur, veuillez vous référer au modificateur .sync pour plus de détails, qui ne seront pas décrits ici.

Ce qu'il faut noter ici, c'est que les props ne peuvent pas être modifiés directement dans vue, donc si nous voulons transmettre des valeurs au composant parent, nous devons toujours modifier les valeurs dans data uniquement. exister en tant qu'intermédiaire pour l'appel entre le parent et l'enfant.

De plus, si nous voulons prévisualiser les données initialement transmises par le composant parent, nous devons surveiller les modifications des accessoires via watch et transmettre la valeur lorsque le composant enfant est initialisé.

Remarque : J'ai mis this.$emit('update:formData', this.form) monté dans le sous-composant La raison est d'éviter de charger chaque entrée. L'événement personnalisé est déclenché. dans l'événement d'entrée de la balise, mais le principe de l'écriture est que les composants parent et enfant doivent partager le même objet.

Voici ce que contient le code ci-dessus, lors de l'utilisation : formData.sync="form" pour lier la valeur dans le composant parent, le formulaire est un objet et l'événement personnalisé dans le composant enfant est déclenché. $emit(' update:formData', this.form) , this.form doit également être un objet.

Il faut également noter ici que si plusieurs sous-composants utilisent un objet, alors cette méthode d'écriture est à éviter, car si un composant modifie les données de cet objet, les autres sous-composants changeront également en conséquence. .

Donc quand je l'utilise, j'attribue un objet qui lui est propre à chaque sous-composant, comme par exemple :

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}

Ce sont les données définies dans le composant parent, bien sûr le le nom ne sera pas. Prends-le de cette façon.

Fin

Il n'y a pas grand chose à dire, je suis encore en train d'utiliser Vue et je n'en sais pas assez. ce sont des choses sous-jacentes. Je veux vraiment lire le code source, mais je veux juste y réfléchir... Si vous pensez qu'il y a quelque chose qui ne va pas, dites-le simplement et communiquons les uns avec les autres.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de l'utilisation de JS pour déterminer le contenu contenu dans une chaîne

Animation de particules à liaison réelle JS+HTML5 des événements de souris

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!