uniapp vue3怎么获取当前组件实例的方法？

Question

技术栈：

• uniapp
• vue3

语法：

• Composition API
• setup语法糖

问题：
怎么拿到在 .vue 文件里自己定义的 function？

Answer 1

美酒没故事° 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

在Vue 3的Composition API中，可以通过ref或reactive将自定义函数绑定到组件实例上。下面是获取当前组件示例的方法：

1. 在index.vue文件中，将自定义函数添加到setup函数中，并使用ref或reactive将其绑定到组件实例上。例如：

<template>
  <!-- 省略其他代码 -->
</template>

<script setup>
import { ref } from 'vue';

// 自定义函数
const getData = () => {
  // 执行逻辑
};

// 将自定义函数绑定到组件实例上
const dataFunc = ref(getData);

// 导出绑定后的函数
export { dataFunc };
</script>

1. 在需要获取当前组件示例的其他地方（比如在index.js或refreshToken.js中），引入index.vue组件，并使用provide将绑定的函数提供给子组件：

// index.js
import { createApp } from 'vue';
import Index from './index.vue';

const app = createApp(Index);
app.provide('dataFunc', Index.dataFunc); // 将绑定的函数提供给子组件
app.mount('#app');

1. 在子组件（比如addFacility.vue）中，使用inject获取提供的函数，并调用它：

<template>
  <!-- 省略其他代码 -->
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const dataFunc = inject('dataFunc');

    // 使用获取到的函数
    const someMethod = () => {
      dataFunc.value(); // 调用绑定的函数
    };

    return {
      // 返回其他数据和方法
      someMethod
    };
  }
};
</script>

这样，你就可以在子组件中通过dataFunc.value()来调用在index.vue中定义的getData函数了。