vue3挂载全局方法和组件

话不多说直接上代码

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 注册全局方法和组件
function myMethod(){
  console.log('Hello, world!');
}
app.provide("myMethod", myMethod) // provide注册全局方法 inject获取
import _ from 'lodash' // lodash方法
app.provide("_", _)

// 注册方法2
app.config.globalProperties.$user = {
  name: '蔡徐坤',
  title: '唱跳rap'
}

// component全局组件注册--------------------------------------------------注意公共组件自己写一个
import JgEmpty from '@/components/empty/index.vue'
app.component("JgEmpty", JgEmpty)

app.mount('#app')

具体某个A.vue页使用

<template>
  <div>
    <!-- 全局组件直接使用 -->
    <JgEmpty :description="'无数据'" />

    <!-- lodash使用 -->
    <div>{{ _.round(1.2344,3) }}</div>
  </div>
</template>
<script>
import {defineComponent, inject} from 'vue' // 按需引入ref函数
export default defineComponent({
  components: {
  },
  name: 'testPage',
  setup() {
    let myMethod = inject("myMethod")      //  通过 inject 可以获取到 全局实例上 通过 provide  所注入的参数值。
    myMethod()

    let _ = inject("_")

	// 使用全局方法2
    const cns = getCurrentInstance()
    console.log(cns.appContext.config.globalProperties.$user)
    // or
    const { proxy } = getCurrentInstance()
    console.log(proxy.$user)

    // 将变量和函数返回，以便在模版中使用
    return {
      myMethod,
      _,
    }
  }
})
</script>