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>
原文地址：https://blog.csdn.net/sdhshsjh/article/details/145284127
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！