vue3挂载全局方法和组件

i_am_a_div_日积月累_

已于 2023-08-16 15:44:09 修改

阅读量1.9k

点赞数

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

于 2023-08-14 14:23:17 首次发布

本文链接：https://blog.csdn.net/i_am_a_div/article/details/132274707

版权

vue3 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue应用中使用`createApp`创建应用，通过`provide`和`inject`实现全局方法和组件的注册与获取，以及如何在组件中使用`setup`生命周期钩子和`lodash`库。

摘要由CSDN通过智能技术生成

话不多说直接上代码

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>