Wie ruft eine Vue-Unterkomponente die Methode der übergeordneten Komponente auf?

Methode: 1. Rufen Sie die Methode der übergeordneten Komponente über „this.$parent.event“ in der untergeordneten Komponente auf. 2. Die untergeordnete Komponente löst mit „$emit“ ein Ereignis für die übergeordnete Komponente aus, und die übergeordnete Komponente kann dieses Ereignis abhören. 3. Die übergeordnete Komponente übergibt die Methode an die untergeordnete Komponente, und die Methode kann direkt in der untergeordneten Komponente aufgerufen werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

In Vue gibt es drei Methoden zum Aufrufen der übergeordneten Komponente aus der Unterkomponente. Hier sind drei Methoden als Referenz: Die erste Methode besteht darin, die übergeordnete Komponente direkt über this.$parent.event aufzurufen die Unterkomponente

Übergeordnete Komponente

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

Untergeordnete Komponente

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

Die zweite Methode

besteht darin,

in der untergeordneten Komponente zu verwenden, um ein Ereignis für die übergeordnete Komponente auszulösen, und die übergeordnete Komponente kann dieses Ereignis abhören.

Übergeordnete Komponente

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

$emitUntergeordnete Komponente

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

Der dritte Weg

besteht darin, dass die übergeordnete Komponente die Methode an die untergeordnete Komponente übergibt und diese Methode direkt in der untergeordneten Komponente aufruft

Übergeordnete Komponente

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

Untergeordnete Komponente

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

[Verwandte Empfehlungen:

vue.js Tutorial

]

Das obige ist der detaillierte Inhalt vonWie ruft eine Vue-Unterkomponente die Methode der übergeordneten Komponente auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!