Comment transmettre des données du composant parent au composant enfant dans vue

Cet article présente principalement la méthode de transmission des données des composants parents de Vue aux composants enfants (accessoires). L'article présente également le code d'implémentation du transfert de valeur (accessoires) entre les composants parents et enfants de Vue. Les amis qui en ont besoin peuvent s'y référer. it

vue structure de la page

Lorsque vous travaillez sur un projet, il arrive souvent que les données de cette page (par exemple : ID numéro) doit être amené sur une autre page pour interroger les détails de certaines données, etc. La méthode traditionnelle consiste à ne pas ajouter de paramètres à l'URL, au cookie ou à attribuer des valeurs au "sessionStorage" et au "localStorage" de H5. C'est la méthode de passage entre les pages.

Avec les méthodes populaires de développement basées sur des composants d'Angularjs, React et Vue, c'est devenu une autre bonne solution.

Récemment, des amis m'ont demandé comment transmettre des paramètres entre les composants Vue ? En fait, Vue dispose de trois façons de transférer des données entre les composants (accessoires, communication des composants, slot. Cette fois, la première méthode est la suivante :

un contenu du composant parent :

components: {'b-p': b} // 注册，只能在当前a组件里使用
<b-p :propsname=&#39;datas(向子组件传递的参数)&#39;></b-p>

<template> <p>{{propsname}}</p> </template>
export default{
props: [&#39;propsname&#39;],
data(){}
}

PS : laissez-moi vous présenter comment transmettre des valeurs (props) entre les composants vue parent et enfant

<template>
  <p>
    <p>{{message}}(子组件)</p>
  </p>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

<template>
  <p>
    <p>父组件</p>
    <child :message="parentMsg"></child> 
  </p>
</template>
<script>
import child from &#39;./child&#39; //引入child组件
export default {
  data() {
      return {
        parentMsg: &#39;a message from parent&#39; //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

Problèmes liés à la transmission de valeurs dans layui

Comment implémenter un système de loterie à l'aide de JavaScript

Réponse détaillée : Quel impact les changements de vue ont-ils sur les composants ?

Comment emballer avec Parcel

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!