vue3子组件重写父组件的方法

在Vue 3中，子组件可以重写父组件的方法。下面是一个示例，展示了如何在子组件中重写父组件的方法：

// 父组件
<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log("父组件的方法");
    },
  },
};
</script>

// 子组件
<template>
  <div>
    <button @click="handleClick">点击我覆盖父组件的方法</button>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  methods: {
    handleClick() {
      console.log("子组件重写的方法");
    },
  },
});
</script>

在这个例子中，父组件中有一个名为`handleClick`的方法，在子组件中，我们通过定义相同名称的方法来重写父组件的方法。当点击子组件中的按钮时，将会打印"子组件重写的方法"，而不是"父组件的方法"。

需要注意的是，如果你需要同时保留父组件的方法逻辑，可以使用`super`关键字在子组件中调用父组件的方法，如下所示：

methods: {
  handleClick() {
    super.handleClick(); // 调用父组件的方法逻辑
    console.log("子组件重写的方法");
  },
},

这样做可以在子组件中添加额外的逻辑，同时保留父组件的方法逻辑。