vue3小程序 中封装组件 但是想在页面中直接获取使用的话可以 通过这样的方式

我们经常会封装许多模那种 loading  或者toast 这种内容，如果在页面上大量写的话  也会感觉代码很乱 所以我们可以简单封装一个 vue2 版本 或者 vue3 版本

1. 创建一个 toast.js 文件

export default function shortToast(title, icon = 'none') {   if (typeof title !== 'string') {     return;   }   uni.showToast({     title,     icon,     duration: 2000,     success: function() {       console.log('Toast displayed successfully');     },     fail: function(err) {       console.error('Failed to display toast:', err);     }   }); }

在vue2中 我们将这个文件导入main.js 文件 中

import {   shortToast } from '@/libs/Toast.js'  Vue.prototype.$toast = shortToast

在页面中我们可以直接 this. shortToast('内容')

在vue3 中

import App from './App' import shortToast from './utils/toast' // #ifndef VUE3 import Vue from 'vue' import './uni.promisify.adaptor' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({   ...App }) app.$mount() // #endif  // #ifdef VUE3 import {   createSSRApp } from 'vue' import store from './store/index.js' export function createApp() {   const app = createSSRApp(App)   app.use(store)   app.config.globalProperties.$toast = shortToast   return {     app   } } // #endif

在页面中 引用的时候 我们就是通过这样的方法

<script setup>   import {     ref,     reactive,     getCurrentInstance   } from 'vue'   import {     onLoad   } from '@dcloudio/uni-app'     const { proxy: { $toast} } = getCurrentInstance();  onLoad(()=>{ $toast('1111') })