Comment utiliser les méthodes des composants parents dans Vue

Vue.js est l'un des frameworks JavaScript les plus populaires dans le développement Web actuel. Il possède de nombreuses fonctions et mécanismes puissants, dont le plus couramment utilisé est l'utilisation de composants. Dans Vue, les composants peuvent facilement implémenter une liaison de données logique et une réponse aux événements, mais si vous devez accéder aux méthodes ou aux données du composant parent dans un composant enfant, vous devrez peut-être utiliser des techniques spéciales. Cet article explique comment utiliser la méthode du composant parent dans Vue.

1. Transfert des méthodes des composants parents

Dans Vue, les méthodes et les données des composants parents peuvent être transmises aux composants enfants via les attributs des composants (accessoires). Supposons qu'il existe un composant parent qui contient un bouton de calculatrice et une zone d'affichage, comme indiqué ci-dessous :

<template>
  <div>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <div>{{ count }}</div>
    <child :increment="add"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    },
    sub() {
      this.count--
    }
  }
}
</script>

Dans le composant parent, nous définissons deux méthodes add et sub, qui sont utilisées respectivement pour augmenter et diminuer le nombre de compteurs. Dans le même temps, nous avons créé un composant enfant Child et transmis la méthode add du composant parent comme incrément d'attribut au composant enfant. Dans le composant enfant, nous pouvons recevoir cette propriété via des accessoires et la transmettre au composant parent via la méthode $emit.

<template>
  <div>
    <button @click="increment()">+1</button>
    <button @click="decrement()">-1</button>
  </div>
</template>

<script>
export default {
  props: {
    increment: {
      type: Function
    }
  },
  methods: {
    increment() {
      this.$emit('increment')
    },
    decrement() {
      this.$emit('decrement')
    }
  }
}
</script>

Dans le sous-composant, nous définissons deux méthodes d'incrémentation et de décrémentation, qui sont utilisées respectivement pour augmenter et diminuer le nombre de compteurs. Dans le même temps, nous avons reçu l'incrément d'attribut transmis par le composant parent via les accessoires et avons utilisé la méthode $emit pour déclencher l'événement d'incrémentation dans cette méthode.

De cette façon, nous réalisons le transfert de méthode entre les composants, c'est-à-dire que le composant enfant peut transmettre l'événement au composant parent via la méthode d'émission et déclencher la méthode correspondante dans le composant parent.

2. Appel de la méthode du composant parent

En plus de transmettre la méthode du composant parent au composant enfant via les attributs du composant, dans Vue, vous pouvez également appeler la méthode du composant parent directement dans le composant enfant sans la déclencher via la méthode d'émission. L'événement du composant parent. Ci-dessous, nous utilisons un cas pour montrer comment appeler directement la méthode du composant parent dans le composant enfant.

Supposons que nous ayons un composant parent qui contient une zone d'édition et un bouton d'enregistrement, et définit une méthode appelée save pour enregistrer le contenu de la zone d'édition sur le serveur backend. Comme indiqué ci-dessous :

<template>
  <div>
    <textarea v-model="content"></textarea>
    <button @click="saveData">保存</button>
    <child :save-method="save"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    save() {
      // 将编辑区域内容保存到数据库中
    }
  }
}
</script>

Dans le composant parent, nous définissons une méthode appelée save et la transmettons au composant enfant Child en tant qu'attribut save-method.

Dans le composant enfant, nous pouvons recevoir l'attribut save-method transmis par le composant parent via les accessoires et appeler la méthode directement en cas de besoin. Comme indiqué ci-dessous :

<template>
  <div>
    <button @click="save()">保存</button>
  </div>
</template>

<script>
export default {
  props: {
    saveMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    save() {
      this.saveMethod()
    }
  }
}
</script>

Dans le composant enfant, nous recevons l'attribut save-method transmis par le composant parent via les accessoires et appelons la méthode dans la méthode. De cette façon, la fonction d'appel direct de la méthode du composant parent peut être réalisée.

Résumé

Cet article explique comment utiliser les méthodes des composants parents dans Vue, notamment en passant par les propriétés des composants et en appelant directement les méthodes des composants parents. Dans le processus de développement de Vue, le transfert d'informations entre les composants est très important. Si vous utilisez de manière flexible le mécanisme de communication des composants fourni par Vue, vous pouvez obtenir un développement de composants plus efficace et plus flexible.

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!