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>
相关推荐
蚂蚁RichLab前端团队37 分钟前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军1 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5201 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy1 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20501 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL2 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js