vue는 상위 클래스 메서드를 재정의합니다.

Vue를 개발할 때 구성 요소 상속을 사용하는 경우가 많습니다. 상위 구성 요소의 메서드는 일반적으로 하위 구성 요소에 의해 상속되고 호출되지만 경우에 따라 특정 요구 사항을 충족하기 위해 상위 구성 요소의 메서드를 재정의해야 합니다. 이 문서에서는 Vue에서 상위 구성 요소를 재정의하는 방법을 소개합니다.

부모 구성 요소의 메서드를 재정의해야 하는 이유

일반적으로 부모 구성 요소의 메서드는 여러 하위 구성 요소에서 공유됩니다. 경우에 따라 일부 하위 구성 요소는 해당 조건에 따라 상위 구성 요소의 메서드를 변경해야 합니다. 이 경우 상위 구성 요소의 메서드를 재정의해야 합니다. 예를 들어, 상위 구성 요소가 전달한 매개 변수를 변경해야 하거나 상위 구성 요소의 특정 작업을 가로채야 하는 경우 상위 구성 요소의 메서드를 재정의해야 합니다.

상위 구성 요소 메서드를 재정의하는 방법

Vue에는 상위 구성 요소 메서드를 재정의하는 두 가지 주요 방법이 있습니다. v-bind를 사용하여 매개 변수를 바인딩하거나 Vue.extend 메서드를 사용하여 하위 클래스 구성 요소를 생성합니다. 아래에서는 이 두 가지 방법을 각각 소개하겠습니다.

v-bind를 사용하여 매개변수 바인딩

Vue에서는 상위 구성 요소가 하위 구성 요소에 매개 변수를 전달할 때 v-bind를 통해 데이터를 바인딩할 수 있습니다. 이 과정에서 하위 구성요소가 상위 구성요소가 전달한 매개변수를 변경하려면 props 속성을 통해 콜백 함수를 전달하고 이 콜백 함수에서 상위 구성요소를 재정의하는 메서드를 구현하기만 하면 됩니다.

예를 들어, 개수 데이터와 표시 메소드가 있는 상위 구성요소인 Counter 구성요소가 있다고 가정해 보겠습니다.

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

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

이제 표시 메소드가 표시될 때마다 하위 구성요소를 사용하여 표시 메소드를 재정의하려고 합니다. 호출되면 먼저 "Before show:"를 팝업한 다음 count 값을 팝업합니다. 이때 v-bind를 사용하여 Child 구성 요소에 새 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 메소드를 전달하면 Child 구성 요소가 이 메소드를 재정의하고 변경된 기능을 추가합니다. .

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 메소드를 정의합니다. super는 상위 구성 요소의 show 메소드를 호출합니다. 그런 다음 Counter 구성 요소에서 Child 구성 요소를 counter 구성 요소의 생성자로 사용합니다. show 메서드가 호출되면 Child 구성 요소의 show 메서드가 트리거됩니다.

요약

위는 Vue에서 상위 컴포넌트 메소드를 다시 작성하는 두 가지 방법입니다. 각 메소드마다 적용 시나리오가 다르므로 특정 상황에 따라 어떤 메소드를 구현할지 선택해야 합니다. Vue를 사용할 때 더 나은 구성 요소 재사용 및 확장성을 위해 구성 요소 상속을 사용해 볼 수 있습니다.

위 내용은 vue는 상위 클래스 메서드를 재정의합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!