2024年vue封装单文件弹窗组件_vue，架构师花费近一年时间整理出来的前端核心知识

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

export function showMsg(msg,onClick){
}

要想使用弹窗首先需要渲染这个弹窗 ,具体渲染逻辑vue.js官方文档就写的很清楚，我们只需要把对应的内容改成我们所需要的

创建一个根组件，然后挂载到页面上的某一个元素

导入根组件

export function showMsg(msg, onClick) {
  //在页面创建一个DIV元素
  const div = docutment.createElement('div')
  docutment.body.appendChild(div)
  //渲染组件到界面上
  const app = createApp(MessageBox,{
    //传递事件 传递消息 执行关闭弹窗
    msg,
    onClick(){
      onclick(()=>{
        //关闭弹窗即 移除div
        app.remove(div)
      })
    }
  });
  // 挂载div
  app.mount(div)
}

MessageBox 为挂载的组件

这时候乍一看 这不就是 新建个 组件只不过是通过函数调用挂载到页面吗。

别着急接着往下看

一个程序首先要满足高内聚低耦合 到目前为止 一个弹框实际上还是使用了两个文件 一个js文件一个vue文件  一个功能使用两个文件 显然是违背高内聚了，在这里的MessageBox无非就是一个组件，那该怎么想办法把组件文件 写到js文件里面来呢？这就考验大家对vue组件的理解程度了，脱离了单文件如何写代码呢。

其实也不难，要明白组件的本质是什么呢？很明显组件的本质就是一个对象！一个配置对象，始终要记住，万物皆对象。脱离单文件我们直接把这个对象写到js里不就实现了 这个时候就需要使用的render函数了 render渲染JSX具体可以去官方文档一探究竟

Vue 提供了一个 h() 函数用于创建 vnodes：h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力。

需要注意的是在JSX语法里是不支持大胡子语法的需要使用react那种写法

const MessageBox = {
  props: {
    //组件配置例如函数参数等
    msg: {
      type: String,
      required: true
    }
  },
//ctx指上下文
  render(ctx) {
//通过上下文拿到属性和emit方法
   const { $props, $emit } = ctx;
     return  <div> <div>{$props.msg}</div> <button click="${emit('onClick')}">关闭</button> </div>
  }
};

关于css样式 除了行内样式  还可以参照react  CSS in JS  随便找一个工具库能在js里写css即可！

全部代码

const MessageBox = {
  props: {
    //组件配置例如函数参数等
    msg: {
      type: String,
      required: true
    }
  },
//ctx指上下文
  render(ctx) {
//通过上下文拿到属性和emit方法
   const { $props, $emit } = ctx;
     return  <div> <div>{$props.msg}</div> <button click="${emit('onClick')}">关闭</button> </div>
  }
};
export function showMsg(msg, onClick) {
  //在页面创建一个DIV元素
  const div = docutment.createElement('div')
  docutment.body.appendChild(div)


### 最后

![前15.PNG](https://img-blog.csdnimg.cn/img_convert/dfd2ccb65ad9b5139c4cb2da20044a24.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/f12307d61deb76b7f6d1cb13a6068953.webp?x-oss-process=image/format,png)

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**



64365)]

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**