从另一个组件覆盖 VueJS 组件方法

Question

我试图从另一个组件覆盖 VueJS 组件方法。

这里我想覆盖另一个 VueJS 文件中的 checkForm 方法。

在 ./src/components/auth_form.vue 中：

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: {...},
  methods: {
    checkForm: function(e: any) {
      console.log('Please override this method!')
    }
  }
})
</script>

我想从 ./src/views/signup.vue 覆盖这个方法：

<script lang="ts">
import Vue from 'vue'
import authForm from '../components/auth_form.vue'

export default Vue.extend({
  name: 'signup',
  components: {
    authForm
  },
  data: function() {...}, 
  methods: {
    // This does not override the method above!
    checkForm: function(e: any) {
      console.log("success")
      // Reset the form
      this.signupForm = {} as SignupForm
    }
  }
})
</script>

Answer 1

是的，它们不会覆盖，因为这 2 个函数在 2 个不同的范围内。他们可以有相同的名字并且独立工作。为了做你想做的事，你必须把 auth_form 的 checkForm 函数放在它的 props 里面。

所以 auth_form:

props: {
  checkForm: {
    type: Function,
    default(e) {
      console.log('Please override this method!')
    }
  }
}

然后在signup.vue

中调用它

<auth-form :check-form="checkForm" />  //pass parent's method into children props

methods: {
  checkForm() {
    console.log("success") // this will override the default one
  }
}

从另一个组件覆盖 VueJS 组件方法

Override VueJS component methods from another component

javascript

typescript

vue.js

vuejs2

vuejs3