Que dois-je faire si le sous-composant uniapp ne parvient pas à obtenir les données du composant parent ?

Dans le processus de développement de petits programmes ou d'applications H5 à l'aide d'uniapp, nous rencontrons souvent des situations où le composant enfant a besoin d'obtenir les données du composant parent, mais parfois nous constatons que le code js du composant enfant ne peut pas obtenir les données transmises par le composant parent. En effet, dans Vue, les composants enfants ne peuvent pas accéder directement aux données du composant parent. Alors comment résoudre ce problème ? Ci-dessous, cet article fournira quelques solutions pour vous aider à résoudre ce problème en douceur pendant le processus de développement.

1. Utilisez des accessoires pour transmettre des données

Dans Vue, les données sont transmises aux composants enfants via des accessoires (propriétés), afin que les composants enfants puissent utiliser les données transmises par le composant parent. Nous pouvons définir une valeur dans le composant parent, puis la lier au composant enfant, afin que le composant enfant puisse lire la valeur. Voici l'exemple de code :

Composant Parent :

<template>
  <div>
    <child-component :parentData="parentData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  }
}
</script>

Composant Enfant :

<template>
  <div>{{parentData}}</div>
</template>
<script>
export default {
  props: {
    parentData: String
  }
}
</script>

La transmission de données via des accessoires est la méthode la plus couramment utilisée dans Vue. Cependant, nous rencontrons parfois des situations particulières, comme un composant enfant qui doit obtenir des données avant le chargement du composant parent. Pour le moment, nous devons utiliser une autre méthode.

2. Utilisez $parent pour obtenir l'instance du composant parent

Vue fournit l'attribut $parent, qui peut être utilisé pour obtenir l'instance du composant parent. Grâce à cette instance, nous pouvons appeler directement les données du composant parent. Voici l'exemple de code :

Composant Parent :

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  },
  mounted() {
    this.$refs.child.printParentData()
  }
}
</script>

Composant Enfant :

<template>
  <div>子组件</div>
</template>
<script>
export default {
  methods: {
    printParentData() {
      console.log(this.$parent.parentData)
    }
  }
}
</script>

Dans le code ci-dessus, nous avons obtenu l'instance du composant parent via $parent, puis appelé les données parentData dans l'instance, et finalement obtenu avec succès le données parent dans le composant.

Il convient de noter que si cette méthode est mal utilisée, elle peut provoquer des problèmes de couplage, donc lors de son utilisation, vous devez considérer les scénarios spécifiques et peser le pour et le contre.

3. Utilisez $emit pour déclencher des événements de composant parent

En plus d'utiliser props et $parent pour obtenir les données du composant parent, nous pouvons également déclencher des événements de composant parent via $emit pour transmettre des données. Le processus d'implémentation spécifique est le suivant :

Composant Parent :

<template>
  <div>
    <child-component @getChildData="getChildData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    getChildData(data) {
      this.parentData = data
    }
  }
}
</script>

Composant Enfant :

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit('getChildData', '来自子组件的数据')
    }
  }
}
</script>

Dans le code ci-dessus, nous avons déclenché un événement nommé getChildData via $emit et transmis les données qui doivent être transmises dans le composant enfant. dans le composant parent. Dans le composant parent, nous lions l'événement @getChildData pour accepter les données transmises par le composant enfant et les enregistrons dans parentData.

Le nom de l'événement pour la réception des données peut être défini par le développeur. Assurez-vous simplement que les noms d'événement du composant enfant et du composant parent sont cohérents.

Ce qui précède est la solution au problème selon lequel le sous-composant uniapp js ne peut pas obtenir les données du composant parent. Dans différents scénarios, nous pouvons choisir différentes manières de résoudre ce problème. J'espère que cet article sera utile à tout le monde.

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!