Résumé des méthodes de transfert de données pour les composants parent-enfant de la classe de formulaire Vue

Cette fois, je vais vous apporter un résumé des méthodes de transfert de données du composant parent-enfant de la classe de formulaire Vue. Quelles sont les précautions pour le transfert de données dans le composant parent-enfant de la classe de formulaire Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 inchangé, 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 s'il y a plusieurs sous-composants utilisant 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 par conséquent. .

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.

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 :

Explication détaillée de l'utilisation du composant vue

Explication détaillée de l'utilisation du composant vue composant d'aperçu du recadrage

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!