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

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

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

Die zweite Methode

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>

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

Der dritte Weg

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

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

]

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!