vue封装单文件弹窗组件_vue

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]( )函数了 r[ender渲染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, KaTeX parse error: Expected 'EOF', got '}' at position 6: emit }̲ = ctx; re…props.msg} 关闭
}
};

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



#### 全部代码

const MessageBox = {
props: {
//组件配置例如函数参数等
msg: {
type: String,
required: true
}
},
//ctx指上下文
render(ctx) {
//通过上下文拿到属性和emit方法
const { $props, KaTeX parse error: Expected 'EOF', got '}' at position 6: emit }̲ = ctx; re…props.msg} 关闭
}
};
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)
}

       到这 就实现了一个js文件封装好vue弹窗的功能了，你可以在任何地方使用这个弹窗，不仅仅是在组件，甚至你可以在js里面例如发送请求里调用这个方法来实现弹窗。



> 
>        目前实现的功能是比较简陋的，但是整体实现的思想逻辑和基础架子已经有了，大家可以自行发挥加上更加完善的功能。
> 
> 
> 
#### 总结

*   对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

*   算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈...（最好多刷一刷，不然影响你的工资和成功率????）

*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。



*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！



![](https://img-blog.csdnimg.cn/img_convert/41a409bca685b4ea0e0aa1a5589c3e09.png)



第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。**如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说**，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。