переопределение дочернего метода родительским методом в vue. js

Question

предположим, у меня есть дочерний компонент

кнопка сохранения. 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>

parent. vue

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

Теперь в родительском компоненте , Мне нужно переопределить функцию сохранения в кнопке сохранения. vue с функцией сохранения в родительском. vue. как мне это сделать? Функция сохранения в кнопке сохранения. vue используется многими другими компонентами

Answer 1

Вы можете передать функцию в качестве ненужного реквизита.

Parent

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

Child

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