vue3挂载全局变量丨技术开发分享录

vue3挂载全局变量

%{ detail.nickname }

转载翻译 %{ formatTime(detail.create_time) } 字数 %{ detail.content && detail.content.length } 阅读 %{ detail.read_num } 评论 %{ comment.page.total } 喜欢 %{ total(detail.like_uids) } %{ formatTag(v) } 编辑文章

1、查看已挂载的全局变量

import App from "./App.vue"

const app = createApp(App)

console.log(app.config.globalProperties)

2、设置全局变量

import App from "./App.vue"

const app = createApp(App)

app.config.globalProperties.$foo = {
  name: 'foo'
}

官方介绍：https://cn.vuejs.org/api/application.html#app-config-globalproperties

3、setup方式使用全局变量

<script setup>
import { getCurrentInstance } from "vue"

const { proxy } = getCurrentInstance()

console.log(proxy.$foo)
</script>

4、option方式使用全局变量

<script>
export default {
  mounted() {
    console.log(this.$foo)
  }
}
</script>

在模板中使用全局变量

<template>
  <div>{{ $foo.name }}</div>
</template>

PS：写作不易，如要转裁，请标明转载出处。

%{ comment.page.total }条评论

%{ v }

vue3挂载全局变量

猜你想看