vue3调用ts里面的方法

在Vue 3项目中，我们可以通过将TypeScript文件中的方法导入到Vue组件中来实现功能调用。解决这一问题的基本思路是：确保TypeScript文件导出需要调用的方法，然后在Vue组件的<script setup>或<script>标签中使用import语句导入这些方法。

1. 使用直接引入

这是最直观的方式。创建一个名为math.ts的文件，内容如下：

typescript
// math.ts
export function add(a: number, b: number): number {
return a + b;
}


接下来，在Vue组件中使用它：

vue
<!-- MyComponent.vue --></p>


import { ref } from 'vue';
import { add } from './math';

const numA = ref(5);
const numB = ref(10);
const result = ref(add(numA.value, numB.value));


<p>
    <p>{{ result }}</p>

2. 定义为全局属性

如果希望在整个应用中都可以访问某些方法，可以考虑将它们注册为全局属性。编辑main.ts文件：

typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { add } from './math'</p>

<p>const app = createApp(App)</p>

<p>app.config.globalProperties.$utils = {
    add,
}</p>

<p>app.mount('#app')

然后在任意组件中这样使用：

vue</p>


export default {
    mounted() {
        console.log(this.$utils.add(2, 3)); // 输出 5
    }
}


<p>

3. 作为插件使用

更进一步地，我们可以把一组相关的方法打包成插件的形式。创建myPlugin.ts：

typescript
// myPlugin.ts
import { add } from './math'</p>

<p>export default {
    install(app: any) {
        app.config.globalProperties.$math = {
            add,
        }
    }
}

接着修改main.ts以安装此插件：

typescript
// main.ts
import MyPlugin from './myPlugin'</p>

<p>// ... 其他代码 ...</p>

<p>app.use(MyPlugin)

通过上述三种方式，您可以根据项目的具体需求选择最合适的方法来实现在Vue 3中调用TypeScript定义的方法。无论是简单的单个函数调用，还是构建复杂的工具库，这些技术都能为您提供良好的支持。