vue overrides parent class method

When developing Vue, the use of component inheritance is often involved. The methods of parent components are usually inherited and called by child components, but in some cases we need to override the methods of parent components to meet specific needs. This article will introduce how to override parent components in Vue.

Why you need to override the methods of the parent component

Normally, the methods of the parent component are shared by multiple child components. In some cases, some sub-components need to make corresponding changes to the methods of the parent component according to their own conditions. In this case, it is necessary to override the methods of the parent component. For example, when we need to change the parameters passed by the parent component or intercept certain operations of the parent component, it becomes necessary to override the parent component's method.

How to override the method of the parent component

In Vue, there are two main ways to override the method of the parent component: use v-bind to bind parameters or use the Vue.extend method to create a child class component. Below we will introduce these two methods respectively.

Use v-bind to bind parameters

In Vue, when the parent component passes parameters to the child component, you can bind data through v-bind. During this process, if the child component wants to change the parameters passed by the parent component, it only needs to pass a callback function through the props attribute, and implement the method of overriding the parent component in this callback function.

For example, suppose we have a Counter component as a parent component, which has a count data and a show method:

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

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

Now we want to use a Child component to override the show method , so that every time the show method is called, "Before show:" will pop up first, and then the value of count will pop up. At this time, we can use v-bind to bind a new show method in the Child component:

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

In this way, when we pass the show method in the parent component, the Child component will rewrite this method removed and the changed functionality added.

Use the Vue.extend method to create a subclass component

Another way to implement a method of overriding a parent component is to use the Vue.extend method to create a subclass component. This method is suitable for scenarios where multiple methods of the parent component need to be overridden, and the child component may be more convenient when used in multiple parent components.

The Vue.extend method allows us to create a new component constructor based on the parent component, and rewrite the parent component by defining the data, methods and other attributes of the new component constructor. For example, we can rewrite the show method of the Counter component like this:

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

In this code, we create a constructor named Child through the Vue.extend method and define the show method in the Child component , call the show method of the parent component through this.$super. Then, in the Counter component, we use the Child component as the constructor of the counter component. When the show method is called, the show method in the Child component will be triggered.

Summary

The above are two methods of rewriting parent component methods in Vue. Each method has different application scenarios, and you need to choose which method to implement based on the specific situation. When using Vue, for better component reuse and scalability, we can try to use component inheritance.

The above is the detailed content of vue overrides parent class method. For more information, please follow other related articles on the PHP Chinese website!