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

【问题标题】：Override VueJS component methods from another component从另一个组件覆盖 VueJS 组件方法
【发布时间】：2020-09-04 23:28:43
【问题描述】：

我试图从另一个组件覆盖 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>

【问题讨论】：

标签： javascript typescript vue.js vuejs2 vuejs3

【解决方案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
  }
}

【讨论】：