组合式API

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

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

export function getType(params) {// 判断是否是基本类型let res = typeof paramsif (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>