vue3 中如何使用 composition-api 进行代码高效复用

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Vue.js

这是一个创建于 1427 天前的主题，其中的信息可能已经有所发展或是发生改变。

刚接触 vue3 ，请教大佬们一个问题，

之前 vue2 项目使用了大量 mixins 来复用代码（ mixins 有点像面向对象继承的感觉，还能重写方法和变量），

现在用了 vue3,composition-api 如何实现 mixins 的功能？

mixins 里有 20 个通用变量和 10 几个通用方法，都是和业务有关的，

请问在 vue3 如何通过 composition-api 来达到 mixins 那样高效的复用，

我看了官网的例子，但在实际业务中不太方便使用，

mixins 里是可以直接操作 props ，emits ，但是在 hook 中就得传参进去，而且通用变量得挨个解构导入，

网上搜了一些，也没看到 hook 如果能代替 mixins 来实现高效复用

Mixins

复用

变量

7 条回复

Agdhfdjh

2021-12-30 16:25:34 +08:00

mixins 是 vue react 放弃的复用方法，得换个思路去学 hook

rzWack

2021-12-30 16:44:09 +08:00 via Android

同，蹲一个大佬的解说。。

ccyu220

2021-12-30 16:58:37 +08:00

在 `useHooks()` 中使用 `getCurrentInstance` 来避免重复传参

ccyu220

2021-12-30 17:07:27 +08:00

```ts
import { getCurrentInstance } from 'vue';

export function useDemo() {

const instance = getCurrentInstance();
const { props, emit } = instance;

console.log(props);
console.log(emit);
}
```

ToPoGE

2021-12-30 20:42:26 +08:00

大佬，有办法获取到外部定义的响应式变量吗？
就是类似选项 API 中的 data ，methods ，watch 之类的？

ToPoGE

2021-12-30 20:42:42 +08:00

@ccyu220
大佬，有办法获取到外部定义的响应式变量吗？
就是类似选项 API 中的 data ，methods ，watch 之类的？

ccyu220

2021-12-31 10:15:56 +08:00 via iPhone

@ToPoGE 可以的，instance 配合 provide