全局组件和全局方法的使用

全局组件

☞ src下面新建plugins=> index.js 文件，用于注册全局组件

index.js 文件内容如下：

import modal from './modal'
export default function installPlugins(app){
  // 模态框对象
  app.config.globalProperties.$modal = modal
}

☞ modal.js 文件内容如下：

import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
export default {
  // 弹出提示
  msgBox(content) {
    ElMessageBox.alert(content, "系统提示")
  },
  // 错误提示
  msgBoxError(content) {
    ElMessageBox.alert(content, "系统提示", { type: 'error' })
  },
  // 成功提示
  msgBoxSuccess(content) {
    ElMessageBox.alert(content, "系统提示", { type: 'success' })
  },
  // 警告提示
  msgBoxWarning(content) {
    ElMessageBox.alert(content, "系统提示", { type: 'warning' })
  },
}

全局方法

接下来我们将项目的全局方法全部封装到一个文件夹中，方便管理

在src=> utils文件夹中创建一个vueGlobal.js，用于注册全局方法

⚪ main.ts中引入vueGlobal.js

import VueGlobal from '@/utils/vueGlobal.js'  // 导入插件

// 使用插件
app.use(VueGlobal)

然后我们完成一下对于这个全局定义的封装，这里首先是element-plus的封装

//  全局方法引入
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
export default {
  install(app) {
    // 全局注册常用的 Vue 函数
    app.config.globalProperties.$ref = ref
    app.config.globalProperties.$ElNotification = ElNotification
  }
}

⚪ 使用

☞ vue2写法

之前我们在vue2之中我们使用的时候会按照这种写法进行使用

$ElNotification('xxx')

☞ vue3写法

在vue3 setup 组合式API之中我们可以通过 getCurrentInstance() 来获取实例

// 引入 getCurrentInstance
import { getCurrentInstance } from 'vue'

// 调用
const { proxy } = getCurrentInstance()

//使用
proxy.$ElNotification('xxx')

全局注册vue方法

☞ 根目录引入

import VueGlobal from '@/utils/vueGlobal.js'  // 导入全局vue方法
app.use(VueGlobal) // 使用vue方法

// vueGlobal.js 
//  全局方法引入
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { parseTime } from '@/utils/methods.ts'
export default {
  install(app) {
    // 全局注册常用的 Vue 函数
    app.config.globalProperties.$ref = ref
    app.config.globalProperties.$reactive = reactive
    app.config.globalProperties.$toRefs = toRefs
    app.config.globalProperties.$useRouter = useRouter
    app.config.globalProperties.$parseTime = parseTime
    app.config.globalProperties.$onMounted = onMounted
  }
}

☞ 使用

比如说我们呢在页面之中使用路由

// 之前我们使用类似于这样
import {useRouter} from 'vue-router'
const router=useRouter();
//现在我们使用 
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 获取当前实例
const router=proxy.$useRouter();

全局注册其他方法

☞ 根目录引入

import VueGlobal from '@/utils/vueGlobal.js'  // 导入全局vue方法
app.use(VueGlobal) // 使用

//  全局方法引入
import { parseTime } from '@/utils/methods.ts'
export default {
  install(app) {
    // 全局注册常用的 Vue 函数
    app.config.globalProperties.$parseTime = parseTime
  }
}

☞ 使用

在页面之中使用

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 获取当前实例
const router=proxy.$parseTime(xxx);