Bagaimanakah subkomponen vue memanggil kaedah komponen induk?-View.js-php.cn

Bagaimanakah subkomponen vue memanggil kaedah komponen induk?

青灯夜游

Lepaskan： 2021-10-26 12:03:28

asal

124546 orang telah melayarinya

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.

Bagaimanakah subkomponen vue memanggil kaedah komponen induk?

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>

Salin selepas log masuk

Komponen anak

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

Salin selepas log masuk

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>

Salin selepas log masuk

Komponen anak

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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