vue は親クラスのメソッドをオーバーライドします

Vue を開発する場合、コンポーネントの継承の使用がよく関係します。通常、親コンポーネントのメソッドは子コンポーネントによって継承され、呼び出されますが、場合によっては、特定のニーズを満たすために親コンポーネントのメソッドをオーバーライドする必要があります。この記事では、Vue で親コンポーネントをオーバーライドする方法を紹介します。

親コンポーネントのメソッドをオーバーライドする必要がある理由

通常、親コンポーネントのメソッドは複数の子コンポーネントで共有されます。場合によっては、サブコンポーネントが独自の条件に応じて親コンポーネントのメソッドを変更する必要がある場合、親コンポーネントのメソッドをオーバーライドする必要があります。たとえば、親コンポーネントによって渡されるパラメータを変更する必要がある場合、または親コンポーネントの特定の操作をインターセプトする必要がある場合、親コンポーネントのメソッドをオーバーライドする必要があります。

親コンポーネントのメソッドをオーバーライドする方法

Vue では、親コンポーネントのメソッドをオーバーライドする主な方法が 2 つあります。v-bind を使用してパラメーターをバインドするか、Vue を使用します。 extend メソッドを使用して子クラスコンポーネントを作成します。以下では、これら 2 つの方法をそれぞれ紹介します。

v-bind を使用してパラメータをバインドする

Vue では、親コンポーネントが子コンポーネントにパラメータを渡すときに、v-bind を通じてデータをバインドできます。このプロセス中に、子コンポーネントが親コンポーネントによって渡されたパラメータを変更したい場合は、props 属性を介してコールバック関数を渡し、このコールバック関数で親コンポーネントをオーバーライドするメソッドを実装するだけで済みます。

たとえば、親コンポーネントとして Counter コンポーネントがあり、カウント データと show メソッドがあるとします。

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

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

次に、子コンポーネントを使用して show メソッドをオーバーライドしたいとします。これにより、show メソッドが呼び出されるたびに、最初に「Before show:」が表示され、次に count の値が表示されます。現時点では、v-bind を使用して、子コンポーネントに新しい show メソッドをバインドできます。

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

この方法で、親コンポーネントに show メソッドを渡すと、子コンポーネントはこのメソッドを書き換えます。削除され、変更された機能が追加されました。

Vue.extend メソッドを使用してサブクラス コンポーネントを作成する

親コンポーネントをオーバーライドするメソッドを実装する別の方法は、Vue.extend メソッドを使用してサブクラス コンポーネントを作成することです。このメソッドは、親コンポーネントの複数のメソッドをオーバーライドする必要があるシナリオに適しており、子コンポーネントは複数の親コンポーネントで使用する場合に便利です。

Vue.extend メソッドを使用すると、親コンポーネントに基づいて新しいコンポーネント コンストラクターを作成し、新しいコンポーネント コンストラクターのデータ、メソッド、その他の属性を定義して親コンポーネントを書き直すことができます。たとえば、Counter コンポーネントの show メソッドを次のように書き換えることができます。

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

このコードでは、Vue.extend メソッドを通じて Child という名前のコンストラクターを作成し、Child コンポーネントで show メソッドを定義し、呼び出します。 this.$super を介して親コンポーネントの show メソッド。次に、Counter コンポーネントでは、Child コンポーネントをカウンター コンポーネントのコンストラクターとして使用し、show メソッドが呼び出されると、Child コンポーネントの show メソッドがトリガーされます。

概要

上記は、Vue で親コンポーネントのメソッドを書き換える 2 つの方法です。それぞれの方法には異なるアプリケーション シナリオがあり、特定の状況に基づいて実装する方法を選択する必要があります。 Vue を使用する場合、コンポーネントの再利用とスケーラビリティを向上させるために、コンポーネントの継承の使用を試みることができます。

以上がvue は親クラスのメソッドをオーバーライドしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。