Vue3 挂载全局方法

Bunny0212

已于 2023-10-10 23:31:45 修改

阅读量2.1k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端前端框架

于 2023-07-19 10:14:20 首次发布

本文链接：https://blog.csdn.net/weixin_46533577/article/details/131802511

版权

前端专栏收录该内容

89 篇文章 0 订阅

订阅专栏

Vue3 挂载全局方法

使用(provide/inject)

在main.ts中使用

import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies';

 
const app = createApp(App)
app.provide('Cookies', VueCookies) // 将getAction方法挂载到全局
 
app.mount('#app')

如果用在单独的ts文件中会报错

页面中使用

<script setup lang="ts">
  import { inject } from 'vue'
  const $cookies: any = inject('Cookies')
</script>

使用 app.config.globalProperties 和 getCurrentInstance()

在main.ts中

import { createApp } from 'vue'
import App from './App.vue'
import VueCookies from 'vue-cookies';
 
const app = createApp(App)

app.config.globalProperties.Cookies = VueCookies;
 
app.mount('#app')

在页面中使用

<script setup lang="ts">
  import { getCurrentInstance } from 'vue'
   const proxy: any = getCurrentInstance()?.proxy;
   const $cookies: any = proxy.Cookies;
    
   console.log('$cookies:', $cookies)
</script>