【前端】VUE3 在原型上挂载全局方法变量

【前端】VUE3 在原型上挂载全局方法变量

1

main.js

const app = createApp(App);

app.config.globalProperties.$全局变量 = '我是全局变量'

2配置App.vue

<script>
import HelloWorld from './components/HelloWorld.vue'
import {getCurrentInstance} from "vue";


export default {
  name: 'App',
  components: {
    HelloWorld
  }, 
    setup(){

      
      //在这里定义全局
        // const {ctx} = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到

        console.log('挂载全局变量 start')
        const internalInstance  = getCurrentInstance(); //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
        const globalProperties = internalInstance.appContext.config.globalProperties
        const $全局变量= globalProperties.$全局变量
        console.log($全局变量)

        console.log('挂载全局变量 end')
        
    },
}
</script>

3 全局使用 在其他vue页面种 直接这样使用

console.log(this.$全局变量)