> 首先Vue3.0封装全局的组件和2.0有所以不同，3.0采用`createApp,reactive`或者`createVNode,render` ## 这里采用`createApp` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ae4b6d59d1a49069631ddce8982ee46~tplv-k3u1fbpfcp-watermark.image?) ### 1.先搞个loading.vue组件 ``` ``` ### 2.在utils文件夹中建load.js 1. > `const app = createApp({})`返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文 2. > 该函数接收一个根组件选项对象作为第一个参数 3. > 使用第二个参数，我们可以将根参数传递给应用程序： ``` import {createApp,reactive} from 'vue' import Loading from '@/components/loading.vue' const divDom = document.createElement('div') divDom.setAttribute('class', 'loading-container') // document.body.appendChild(divDom) const options = reactive({ showToast: true, txt: '拼命加载中...' }) //这里是关键部位options 是向Loading 组件传递的参数 const $loading = createApp(Loading, {options}).mount(divDom) const loadPlguin = { show({txt}) { // 控制显示loading的方法,这里是show方法传入的对象 options.showToast = true options.txt = txt document.body.appendChild($loading.$el) }, hide() { // 控制loading隐藏的方法 options.showToast = false; } } export default { install(app) { // 3.0的全局挂载 app.config.globalProperties.$loading = loadPlguin } } ``` ### 3.在`main.js` 中引入 ``` import load from './utils/load' import { createPinia } from 'pinia' // 使用pinia let app=createApp(App); app.use(store).use(load).use(router).use(createPinia()).mount('#app') ``` ### 4. 在组件中的调用 > 这里提一嘴，通常是用`ref`包装基本类型的数据，`reactive`包装引用类型的数据，`ref的底层也是reactive` ``` ``` ## 全局dialog封装这里用的`createVNode,render` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2fb4b9cd1df4ec28d86a2984e872b73~tplv-k3u1fbpfcp-watermark.image?) ### 1. 搞个dialog.vue组件 ``` ``` ### 2.utils中建立dialog.js ``` import {createVNode,render} from 'vue' import Dialog from '@/components/dialog.vue' const divDom = document.createElement('div') divDom.setAttribute('class', 'dialog-container') document.body.appendChild(divDom); const dialogPlguin=(option)=>{ return new Promise((resolve,reject)=>{ const okButton=()=>{//确认 render(null,divDom) resolve() } const noButton=()=>{// 取消 render(null,divDom) reject(new Error('取消')) } const vNode=createVNode(Dialog,{...option,okButton,noButton}) render(vNode,divDom) }) } export default { install(app) { app.config.globalProperties.$dialog = dialogPlguin } } ``` ### 3.main.js中引入 ``` import load from './utils/load' import dialog from './utils/dialog' // 使用pinia import { createPinia } from 'pinia' // app.use(createPinia())// let app=createApp(App); app.use(store).use(load).use(dialog).use(router).use(createPinia()).mount('#app') ``` ### 4.组件中使用 ``` const { proxy } = getCurrentInstance(); const getDialog = () => { proxy.$dialog({ title: '你好啊', noButtonTxt: '是' }).then(() => { console.log('成功') }).catch(err => { console.log(err) }) } ``` ## 关于vue3.0动态节点的获取 ```