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

组合式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>
相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript