vue.js - Vue3 : How to override function with the composition 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我的新Comp!”)； 来自重写的 utilMethod。 但我不知道如何做到这一点，因为我们可以轻松地使用一些 native 类(和/或 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