2024年前端最新vue封装单文件弹窗组件_vue，面试简历模板

最新推荐文章于 2024-08-07 21:53:27 发布

xcbyaya

最新推荐文章于 2024-08-07 21:53:27 发布

阅读量745

点赞数 14

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/xcbyaya/article/details/138813737

版权

程序员专栏收录该内容

448 篇文章 0 订阅

订阅专栏

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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

VUE想要实现一个普通弹窗，想必对于大部分前端开发者来说实现起来都是非常简单一件事情，但是如果说要封装某一个具体需求效果，可能就难倒不少同学，由此可见从实现到封装这个过程是非常考验个人能力的！

普通弹窗无非就是新建弹窗文件引用注册提供一些数据再加上某些函数就能写好一个弹窗组件在页面使用

<template>
  <div>
    <messageBox v-if="show">弹出提示</messageBox>
    <button @click="show = true">显示</button>
  </div>
</template>
<script>
import messageBox from '../component/alert.vue';//引入组件
  export default {
    components: { messageBox },//注册
    data () {
      return {
        show: false
      }
    }
  }
  </script>

这种弹窗简单是简单可需求只要一个弹窗真的有必要每个地方都引入注册在使用做一大堆重复操作吗？就像原生的JS弹窗就一个alert()就搞定的事情，到VUE里怎么还变复杂了呢，所以如果说要想把弹窗封装起来的话就需要考虑到代码易用性，实现一个弹窗可以很复杂，封装的时候多写点代码无所谓，反正封装只写一次，但是！使用的时候一定要简单，越简单越好，因为用的次数远远大于你封装实现的次数，一次封装无数次使用，那具体如何封装呢？

首先需要考虑的是不需要在做成某一个具体组件了，就单单一个普通的JS函数即可实现

找到文件目录新建一个文件夹 utils 在新建一个工具函数message.js 导出一个函数showMsg 参数为自定义消息 onClick则为具体的回调函数，当点击确定按钮之后执行的事情

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那种写法