我正在使用typescript为vite、vue和vuetify创建一个简单的支架,我希望使用SFC vue的脚本设置版本
<script setup lang="ts">
有一件事我想不通的是如何访问“this”关键字属性?
例如,在我以前的VUE项目中,我可以这样写
this.$vuetify.themes.light.colors.primary
因此我可以在组件中的任何地方访问$vuetify,但是现在在脚本设置模式下,“this”关键字未定义;如何访问“this”属性?
我正在使用typescript为vite、vue和vuetify创建一个简单的支架,我希望使用SFC vue的脚本设置版本
<script setup lang="ts">
有一件事我想不通的是如何访问“this”关键字属性?
例如,在我以前的VUE项目中,我可以这样写
this.$vuetify.themes.light.colors.primary
因此我可以在组件中的任何地方访问$vuetify,但是现在在脚本设置模式下,“this”关键字未定义;如何访问“this”属性?
2条答案
按热度按时间njthzxwz1#
script
标签中的setup
保留字是下列的语法糖:所以很自然地,在
setup
函数中,你不需要this
关键字,因为现在你只需要:现在,当你启动Vuetify框架时,一个示例将被保存在某个地方,如下所示:
现在您已经将
vuetify
示例存储到了某个地方,您可以像导入任何其他javascript/typescript文件一样导入它:编辑
我猜Vue 3中的情况会有一些不同。稍微研究一下之后,您可以使用
getCurrentInstance
获得当前的Vue示例mccptt672#
使用提供和注入
例如,我正在使用marcoschulte/vue 3-progress包,每当路由发生时,都会在顶部显示一个加载条。
根据vue 3-progress文档,我可以在script标记中使用这个.$progress,但是this关键字在里面不可用。
因此,在本场景中,我必须使用provide和inject进行 prop 钻探。
在main.js或app.js中(在laravel中)
在任何SFC中