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 但在 MyNewComp! "); 来自覆盖的 utilMethod。但我不知道如何做到这一点，因为我们可以很容易地使用一些本地人 classes（and/or 使用 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

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

Vue3 : How to override function with the composition API?

overriding

vue.js

vuejs3

vue-composition-api