Vue3 中使用组合式API和依赖注入实现自定义公共方法

微光无限2025-01-22 21:13

组合式API

1.在项目根目录 src 文件夹下创建文件夹 utils ，创建 index.js 文件

2.抛出想要对外暴露的方法，以下是一个判断数据类型的方法

复制代码

export function getType(params) {
  // 判断是否是基本类型
  let res = typeof params
  if (res !== 'object') {
    return res
  } else {
    // 判断复杂类型
    const typeStr = Object.prototype.toString.call(params)
    const match = typeStr.match(/\[object (\w+)\]/)
    if (match) {
      return match[1].toLowerCase()
    }
    return 'unknown'
  }
}

3.在 main.js 文件写如下代码，其中注释已附上

复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入方法文件
import * as utils from './utils'
// 创建vue实例
const app = createApp(App)
// 全局挂载
app.config.globalProperties.$utils = utils
app.mount('#app')

4.在组件中使用

复制代码

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

defineProps({
  msg: String,
})

onMounted(() => {
  // 使用组合式API获取当前实例
  const instance = getCurrentInstance()
  if (instance && instance.proxy) {
     let res = instance.proxy.$utils.getType(1)
     console.log('====================================')
     console.log(res)
     console.log('====================================')
  }
})
</script>

<template>
  <div>{
  
  { msg }}</div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

依赖注入

1、2步骤是一样的，不过多赘述

3.在 main.js 文件写如下代码，其中注释已附上

复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入方法文件
import * as utils from './utils'
// 创建vue实例
const app = createApp(App)
// 依赖注入
app.provide('utils', utils)
app.mount('#app')

4.在组件中使用

复制代码

<script setup>
import { ref, onMounted, inject } from 'vue'

defineProps({
  msg: String,
})

onMounted(() => {
  // 依赖注入
  const utils = inject('utils')
  let res = utils.getType(123)
  console.log('====================================')
  console.log(res)
  console.log('====================================')
})
</script>

<template>
  <div>{
  
  { msg }}</div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>