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

fdbelqdn  于 2022-12-10  发布在  Java
关注(0)|答案(2)|浏览(390)

我正在使用typescript为vite、vue和vuetify创建一个简单的支架,我希望使用SFC vue的脚本设置版本

<script setup lang="ts">

有一件事我想不通的是如何访问“this”关键字属性?
例如,在我以前的VUE项目中,我可以这样写

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

因此我可以在组件中的任何地方访问$vuetify,但是现在在脚本设置模式下,“this”关键字未定义;如何访问“this”属性?

njthzxwz

njthzxwz1#

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>
mccptt67

mccptt672#

使用提供和注入

例如,我正在使用marcoschulte/vue 3-progress包,每当路由发生时,都会在顶部显示一个加载条。
根据vue 3-progress文档,我可以在script标记中使用这个.$progress,但是this关键字在里面不可用。
因此,在本场景中,我必须使用provide和inject进行 prop 钻探。
在main.js或app.js中(在laravel中)

require('./bootstrap');

import { createApp } from 'vue'
import App from './views/App.vue'
import store from './store/index'
import router from './router'
import Vue3Progress from 'vue3-progress'

const options = {
    position: "fixed",
    height: "3px",
    color: "#9d5e32",
}

let app = createApp(App)

app.use(store)
    .use(router)
    .use(Vue3Progress, options)
    // $progress is set automatically when I import vue3-progress at top
    .provide('progressBar', app.config.globalProperties.$progress) 
    .mount('#app')

在任何SFC中

<template>
    <vue3-progress />
    <TopNav />
        <router-view></router-view>
    <Footer />
</template>

<script setup>

    import Header from '../components/admin/Fixed/Header.vue'
    import Footer from '../components/admin/Fixed/Footer.vue'

    import { inject } from 'vue-demi'
    import { useRouter } from 'vue-router'

    let router = useRouter()
    let progressBar = inject('progressBar')

    router.beforeEach((to, from, next) => {

        progressBar.start()
        next()
    })

    router.afterEach((to, from) => {

        progressBar.finish()
    })

</script>

相关问题