Vue3：如何使用组合 API 覆盖函数？

Question

假设我们有一个可比较的函数，如下所示：

// composable/useShareComp.ts
export function useShareComp() {
  const toto = "hey";
  const tata = ref(0);

  function utilMethod() {
    console.log("Util Méthod !!");
  }
  function mainMethod() {
    console.log("Main Méthod !!");
    console.log("should call the overriden or fallback to this utilMethod");
    utilMethod()
  }
  return { toto, tata,  utilMethod,  mainMethod };
};

现在，我有 2 个组件将使用可组合方法。 （我用的是新的3.2版本）

// components/SharComp.vue

<template>
  <h1>share comp</h1>
  <p>{{toto}}</p>
  <p>{{tata}}</p>
  <button @click="mainMethod">call main method</button>
</template>

<script setup lang="ts">

import { useShareComp } from "@/composable/useShareComp";

const { toto, tata, mainMethod } = useShareComp();
</script>

所以上面如果调用mainMethod，它将简单地调用utilMethod，从而记录“Util Méthod !!”

但现在我想在另一个组件中覆盖utilMethod，如下面的代码所示

// components/MyNewComp.vue

<template>
  <h1>MY NEW COMP</h1>
  <p>{{toto}}</p>
  <p>{{tata}}</p>
  <button @click="mainMethod">call main method</button>
</template>

<script setup lang="ts">

import { useShareComp } from "@/composable/useShareComp";

const { toto, tata, mainMethod } = useShareComp();

function utilMethod() { // it will not override the utilMethod
  console.log("Util Method but in the MyNewComp!");
}
</script

在 MyNewComp 组件中，我希望 utilMethod 被覆盖，因此当调用 mainMethod 时，它应该记录新的 console.log("Util Method but in the MyNewComp!"); 从被覆盖的 utilMethod 中。 但我不知道如何做到这一点，因为我们可以轻松地使用一些原生类（和/或 vue-class-components 库）

Answer 1

您可以使用默认逻辑将utilMethod 作为回调传递，并且可以覆盖它：

// composable/useShareComp.ts
function defaultUtilMethod() {
    console.log("Util Méthod !!");
  }
export function useShareComp(utilMethod=defaultUtilMethod) {
  const toto = "hey";
  const tata = ref(0);

  
  function mainMethod() {
    console.log("Main Méthod !!");
    console.log("should call the overriden or fallback to this utilMethod");
    utilMethod()
  }
  return { toto, tata,  utilMethod,  mainMethod };
};

和：

<script setup lang="ts">

import { useShareComp } from "@/composable/useShareComp";
function utilMethod() {
  console.log("Util Method but in the MyNewComp!");
}
const { toto, tata, mainMethod } = useShareComp(utilMethod);


</script

使用纯 js 的示例

function a() {
  console.log("aaaaa")
}

function b(f = a) {
  console.log('bbbbbb')
  f();
}

function c() {
  console.log("cccc")
}
console.log('------default callback--------')
b(); //prints bbbbbb aaaaa
console.log('------overriding the callback--------')
b(c); //prints bbbbbb cccc