vue2 では、vue2.x が Vue.prototype.$xxxx=xxx を使用してグローバル変数を定義し、this.$xxx を通じてグローバル変数を取得することがわかります。
しかし、vue3 では、この方法は明らかに機能しません。 vue3 のセットアップではこれを取得できないため、公式ドキュメントによると、次の方法を使用してグローバル変数を定義します。
まず、main.js で定義したいグローバル変数 (System など) を書き込みます。 id
app.config.globalProperties.$systemId = "10"
次に、この変数をページで使用する必要があります。必要なのは、vue から getCurrentInstance を導入することだけです。この変数は使用できないことに注意してください。
import { getCurrentInstance } from "vue"; const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId console.log(systemId);//控制台可以看到输出了10
タイプ: [キー: 文字列]: 任意
// 之前(Vue 2.x) Vue.prototype.$http = () => {} // 之后(Vue 3.x) const app = Vue.createApp({}) app.config.globalProperties.$http = () => {}
import { getCurrentInstance, onMounted } from "vue"; export default { setup( ) { const { ctx } = getCurrentInstance(); //获取上下文实例,ctx=vue2的this onMounted(() => { console.log(ctx, "ctx"); ctx.http(); }); }, };
rree
以上がvue3でグローバル変数を定義する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。