如何在 <script setup> vue SFC 中访问“this”关键字

Posted 2023-02-22

【中文标题】如何在 <script setup> vue SFC 中访问“this”关键字

【英文标题】：How to access "this" keyword in <script setup> vue SFC

【发布时间】：2021-10-27 16:34:42

【问题描述】：

我正在使用 typescript 为 vite、vue 和 vuetify 制作一个简单的脚手架，我想使用 SFC vue 的脚本设置版本

<script setup lang="ts">

我想不通的一件事是如何访问“this”关键字属性？

例如在我的旧 vue 项目中，我可以写这个

this.$vuetify.themes.light.colors.primary

所以我可以在组件的任何位置访问 $vuetify，但现在在脚本设置模式下，“this”关键字未定义； 如何访问“this”属性？

【问题讨论】：

注意：Vue.js 问题是高度特定于版本的，除此标记外，还应始终使用 [vuejs2] 或 [vuejs3] 进行标记。

这是 Vue 3，我认为 SETUP 字会表明它是 vue 3

好的，所以你使用的是Vuetify 3 Alpha，对吧？

是的，我正在使用带有新模块化 createVuetify 模式的 Vueify3

【参考方案1】：

script 标签中的setup 关键字是以下语法糖：

const myComponent = createComponent(
  setup() 
    const foo = "may-the-force";
    let bar = "be-with-you";

    return 
      foo,
      bar
    
  
)

很自然，在setup 函数中，您不需要this 关键字，因为现在您可以这样做：

bar = "be-not-with-you";

return 
  foo,
  bar

现在，当您启动 Vuetify 框架时，一个实例将被保存在某个地方。像这样的：

import Vue from "vue";
import  createVuetify  from 'vuetify'

Vue.use(Vuetify);

export const vuetify = createVuetify( theme:  );

现在您已将 vuetify 实例存储在某个位置，您可以像导入任何其他 javascript/typescript 文件一样导入它：

<script setup lang="ts">
import  vuetify  from "path/to/vuetify/instance";

console.log(vuetify.themes.light.colors.primary);

// You can even set dark mode if you prefer to
vuetify.framework.theme.dark = true;

</script>

---

编辑

我猜 Vue 3 中的情况会有些不同。稍微研究一下后，您可以使用 getCurrentInstance 获取当前的 Vue 实例

<script setup>
    import  getCurrentInstance  from 'vue'

    const app = getCurrentInstance()
    // it should be here in this instance the vuetify object with its properties
    console.log(app);
</script>

【讨论】：

我已经按照您解释的方式将 vuetify 导入到我的组件中，但它没有以前版本 $vuetify 所具有的属性，它只有一个名为 install 的属性，它是一个函数接受一个类型

export default createVuetify( components, directives, theme: themes: light: colors: primary: "#41b883", background: "#35495e", error: "#41b883", info: "#41b883", secondary: "#41b883", success: "#41b883", surface: "#41b883", warning: "#3d405b", , dark: false, variables: , , , , );

更新了答案。请注意我在做export const vuetify = createVuetify()。您将变量 vuetify 而不是 vuetify 框架本身导入到您的组件中。

请查看屏幕截图以亲自查看，我已经按照您所说的导出了 createVuetify()，但由于该功能，我只获得了一个属性，drive.google.com/drive/folders/…跨度>

谢谢亲爱的，我可以从 getCurrentInstance 访问 $vuetify。