在 vue.js 中用父方法覆盖子方法

【问题标题】：overriding child method with parent method in vue.js在 vue.js 中用父方法覆盖子方法
【发布时间】：2020-04-28 04:24:48
【问题描述】：

假设我有一个子组件

保存按钮.vue

<template>
<!--some code like label/div-->
<button @click="save">Save</button>
<!--some code like label/div-->
</template>
<script>
export default{
  methods:{
    save(){
      //some code here
    }
  }
}
</script>

父.vue

<save-button/>
...
<script>
export default{
  methods:{
    save(){
      //some codes
    }
  }
}
</script>

现在在父组件中，我需要用 parent.vue 中的保存功能覆盖 save-button.vue 中的保存功能。我该怎么做？ save-button.vue 中的保存功能被很多其他组件共享

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您可以将函数作为非必需属性传递。

父母

<template>
  <div id="app">Using Parent:
    <SaveButton :save="save"/>Using Default:
    <SaveButton/>
  </div>
</template>

<script>
import SaveButton from "./components/SaveButton";

export default {
  components: {
    SaveButton
  },
  methods: {
    save() {
      console.log("Save from Parent !");
    }
  }
};
</script>

孩子

<template>
  <div>
    <button @click="saveClicked">Save</button>
  </div>
</template>

<script>
export default {
  props: {
    save: {
      type: Function,
      default: null
    }
  },
  methods: {
    saveClicked() {
      if (this.save) {
        this.save();
        return;
      }
      console.log("Save from the Child !");
    }
  }
};
</script>

【讨论】：