Comment un sous-composant vue appelle-t-il la méthode du composant parent ?

Méthode : 1. Appelez la méthode du composant parent via "this.$parent.event" dans le composant enfant. 2. Le composant enfant utilise "$emit" pour déclencher un événement sur le composant parent, et le composant parent peut écouter cet événement. 3. Le composant parent transmet la méthode au composant enfant et la méthode peut être appelée directement dans le composant enfant.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Méthode de Vue permettant aux composants enfants d'appeler les composants parents. Voici trois méthodes pour référence

La première méthode consiste à appeler directement la méthode du composant parent via this.$parent.event dans le composant enfant

Composant Parent.

<template>
  <p>
    <child></child>
  </p>
</template>
<script>
  import child from &#39;~/components/dam/child&#39;;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(&#39;测试&#39;);
      }
    }
  };
</script>

Composant enfant

<template>
  <p>
    <button @click="childMethod()">点击</button>
  </p>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

La deuxième méthode consiste à utiliser $emit dans le composant enfant pour déclencher un événement vers le composant parent, et le composant parent peut écouter cet événement.

Composant parent

<template>
  <p>
    <child @fatherMethod="fatherMethod"></child>
  </p>
</template>
<script>
  import child from &#39;~/components/dam/child&#39;;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(&#39;测试&#39;);
      }
    }
  };
</script>

Composant enfant

<template>
  <p>
    <button @click="childMethod()">点击</button>
  </p>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit(&#39;fatherMethod&#39;);
      }
    }
  };
</script>

La troisième façon est que le composant parent transmet la méthode au composant enfant et appelle cette méthode directement dans le composant enfant

Composant parent

<template>
  <p>
    <child :fatherMethod="fatherMethod"></child>
  </p>
</template>
<script>
  import child from &#39;~/components/dam/child&#39;;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(&#39;测试&#39;);
      }
    }
  };
</script>

Composant enfant

<template>
  <p>
    <button @click="childMethod()">点击</button>
  </p>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

[Recommandations associées : Tutoriel vue.js]

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!