vue3中 如何全局挂载 对象 方法

vue3中 如何全局挂载 对象 方法

app-config-globalproperties

• 这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。

• 如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级

• 官方文档地址： app-config-globalproperties

• main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
const app = createApp(App);

app.config.globalProperties.msg = "hello xiaobaga";
app.use(store).use(router).mount("#app");

• HelloWorld.vue (setup 语法糖)

<script setup>
import {getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
console.log(proxy.msg) // hello xiaobaga
</script>

• HelloWorld.vue （普通方式同理）

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

export default {
  name: "HelloWorld",
  setup() {
    const { proxy } = getCurrentInstance();
    let data = proxy.msg;
    console.log(data); // hello xiaobaga
    return { data };
  },
};
</script>