Exemple de transfert de données entre les composants parent et enfant de la classe de formulaire Vue

Cet article présente principalement l'exemple de transfert de données de composants parent-enfant de la classe de formulaire Vue. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Utilisez Vue. .js pour les projets Le développement utilisera 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 une interaction de transfert de données et d'état entre les composants, ce sera une chose gênante, en particulier c'est une page avec beaucoup de formes.

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. .

Identique à la solution 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 $emit(), mais il existe quelques différences d'utilisation.

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, Il existe généralement trois types : chaîne, nombre et booléen.

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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;
        }
      }
    }
  }
</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: &#39;&#39;
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit(&#39;input&#39;, e.target.value)
      }
    }
  }
</script>

pour composants enfants L'événement d'entrée est lié à une méthode changeName Chaque fois que cette méthode est exécutée, l'entrée d'événement personnalisé sera déclenchée et la valeur de la zone de saisie sera transmise.

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. Passer les données de type référence

Quand il y a beaucoup de contenu dans le sous-composant, par Par exemple, combien de sous-composants y a-t-il ? Si vous liez toujours 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 &#39;./child.vue&#39;

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;,
          age: &#39;21&#39;
        }
      }
    }
  }
</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: &#39;&#39;,
          age: &#39;&#39;,
          address: &#39;&#39;
        }
      }
    },
    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(&#39;update:formData&#39;, this.form)
    }
  }
</script>

accessoires est un seul Pour le flux de données, lorsque nous devons lier des propriétés de manière bidirectionnelle dans les accessoires, nous devons utiliser le modificateur .sync. Pour plus de détails, veuillez vous référer au modificateur .sync, qui ne sera pas décrit 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 une valeur au composant parent, nous devons toujours modifier la valeur dans data. utilisé uniquement comme appel entre le parent et l'enfant. L'intermédiaire existe.

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, lorsque je l'utilise, j'attribue à chaque sous-composant son propre objet, tel que :

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

C'est bien sûr , les données définies dans le composant parent ne seront pas nommées de cette façon.

Fin

Il n'y a pas grand chose à dire, je suis encore en train d'utiliser Vue et je ne sais pas. J'en ai assez parlé de ses éléments sous-jacents. , j'ai vraiment envie de lire le code source, mais j'y pense juste... Si vous pensez qu'il y a quelque chose qui ne va pas, dites-le simplement, communiquons les uns avec les autres.

Recommandations associées :

Instructions pour démarrer avec les formulaires vue

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!