Bagaimanakah subkomponen vue memanggil kaedah komponen induk?

Kaedah: 1. Panggil kaedah komponen induk melalui "this.$parent.event" dalam komponen anak. 2. Komponen anak menggunakan "$emit" untuk mencetuskan acara kepada komponen induk dan komponen induk boleh mendengar acara ini. 3. Komponen induk menghantar kaedah kepada komponen anak, dan kaedah itu boleh dipanggil terus dalam komponen anak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Kaedah subkomponen memanggil komponen induk dalam Vue Berikut ialah tiga kaedah untuk rujukan

Kaedah pertama adalah terus dalam subkomponen Panggil ke. kaedah komponen induk melalui ini.$parent.event

Komponen induk

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

Komponen anak

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

Kaedah kedua Gunakan $emit dalam komponen anak untuk mencetuskan acara kepada komponen induk, dan komponen induk boleh mendengar acara ini.

Komponen induk

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

Komponen anak

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

Jenis ketiga ialah komponen induk menghantar kaedah ke dalam komponen anak , panggil kaedah ini terus dalam komponen anak

Komponen induk

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

Komponen kanak-kanak

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

[Cadangan berkaitan: vue Tutorial .js】

Atas ialah kandungan terperinci Bagaimanakah subkomponen vue memanggil kaedah komponen induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!