overriding child method with parent method in vue.js

Question

suppose I have a child component

save-button.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>

Now in the parent component, I need to override the save function in save-button.vue with the save function in parent.vue. How should I do it? The save function in save-button.vue is shared by a lot of other components

Pierre Said · Accepted Answer · 2020-04-28 04:57:03Z

1

You can pass the function as a non-required prop.

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>

answered Apr 28, 2020 at 4:57

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

overriding child method with parent method in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related