vue mengatasi kaedah kelas induk

Apabila membangunkan Vue, penggunaan warisan komponen sering terlibat. Kaedah komponen induk biasanya diwarisi dan dipanggil oleh komponen anak, tetapi dalam beberapa kes kita perlu mengatasi kaedah komponen induk untuk memenuhi keperluan khusus. Artikel ini akan memperkenalkan cara mengatasi komponen induk dalam Vue.

Mengapa anda perlu mengatasi kaedah komponen induk

Biasanya, kaedah komponen induk dikongsi oleh berbilang komponen anak. Dalam sesetengah kes, beberapa subkomponen perlu membuat perubahan yang sepadan dengan kaedah komponen induk mengikut syarat mereka sendiri Dalam kes ini, kaedah komponen induk perlu diatasi. Sebagai contoh, apabila kita perlu menukar parameter yang diluluskan oleh komponen induk atau memintas operasi tertentu bagi komponen induk, ia menjadi perlu untuk mengatasi kaedah komponen induk.

Cara untuk mengatasi kaedah komponen induk

Dalam Vue, terdapat dua cara utama untuk mengatasi kaedah komponen induk: gunakan v-bind untuk mengikat parameter atau menggunakan Vue. extend kaedah untuk mencipta komponen kelas kanak-kanak. Di bawah ini kami akan memperkenalkan kedua-dua kaedah ini masing-masing.

Gunakan v-bind untuk mengikat parameter

Dalam Vue, apabila komponen induk menghantar parameter kepada komponen anak, anda boleh mengikat data melalui v-bind. Semasa proses ini, jika komponen anak ingin menukar parameter yang diluluskan oleh komponen induk, ia hanya perlu menghantar fungsi panggil balik melalui atribut props dan melaksanakan kaedah mengatasi komponen induk dalam fungsi panggil balik ini.

Sebagai contoh, katakan kita mempunyai komponen Kaunter sebagai komponen induk, yang mempunyai data kiraan dan kaedah tunjuk:

<template>
  <div>
    <button @click="showCount">Show count</button>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        show() {
            alert(this.count)
        }
    }
  }
</script>

Sekarang kita mahu menggunakan komponen Kanak-kanak untuk mengatasi kaedah rancangan , supaya setiap kali kaedah rancangan dipanggil, "Sebelum pertunjukan:" akan muncul dahulu, dan kemudian nilai kiraan akan muncul. Pada masa ini, kita boleh menggunakan v-bind untuk mengikat kaedah rancangan baharu dalam komponen Kanak-kanak:

<template>
  <div>
    <button @click="showCount">Show count</button>
  </div>
</template>

<script>
  export default {
    props: {
        show: Function
    },
    mounted() {
        this.show = () => {
            alert('Before show：' + this.count)
            this.$props.show()
        }
    }
  }
</script>

Dengan cara ini, apabila kita lulus kaedah rancangan dalam komponen induk, komponen Kanak-kanak akan menulis semula kaedah ini dialih keluar dan fungsi yang diubah ditambah.

Gunakan kaedah Vue.extend untuk mencipta komponen subkelas

Cara lain untuk melaksanakan kaedah yang menggantikan komponen induk ialah menggunakan kaedah Vue.extend untuk mencipta komponen subkelas. Kaedah ini sesuai untuk senario di mana berbilang kaedah komponen induk perlu ditindih dan komponen anak mungkin lebih mudah apabila digunakan dalam berbilang komponen induk.

Kaedah Vue.extend membolehkan kami mencipta pembina komponen baharu berdasarkan komponen induk dan menulis semula komponen induk dengan mentakrifkan data, kaedah dan atribut lain bagi pembina komponen baharu. Sebagai contoh, kita boleh menulis semula kaedah persembahan bagi komponen Kaunter seperti ini:

import Vue from 'vue'

const Child = Vue.extend({
    data() {
        return {}
    },
    methods: {
        show() {
            alert('Before show：' + this.count)
            this.$super.show()
        }
    }
})

export default {
    components: {
        Child
    },
    data() {
        return {
            Count: Child
        }
    },
    methods: {
        show() {
            alert(this.count)
        }
    }
}

Dalam kod ini, kita mencipta pembina bernama Child melalui kaedah Vue.extend dan mentakrifkan kaedah show dalam komponen Child , panggil kaedah menunjukkan komponen induk melalui ini.$super. Kemudian, dalam komponen Counter, kita menggunakan komponen Child sebagai pembina komponen pembilang Apabila kaedah show dipanggil, kaedah show dalam komponen Child akan dicetuskan.

Ringkasan

Di atas ialah dua kaedah untuk menulis semula kaedah komponen induk dalam Vue Setiap kaedah mempunyai senario aplikasi yang berbeza, dan anda perlu memilih kaedah yang hendak dilaksanakan berdasarkan situasi tertentu. Apabila menggunakan Vue, untuk penggunaan semula komponen dan kebolehskalaan yang lebih baik, kita boleh cuba menggunakan warisan komponen.

Atas ialah kandungan terperinci vue mengatasi kaedah kelas induk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!