<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那种写法
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: {
**自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
**深知大多数HarmonyOS鸿蒙开发工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!**
**因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/7e615618c1197252d13d49b36a1b2a0f.png)
![img](https://img-blog.csdnimg.cn/img_convert/8bb5ddd3237db7b1e41cedac8bf116a7.png)
![img](https://img-blog.csdnimg.cn/img_convert/da92aab7916f036f954d11b7cb47b06e.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上HarmonyOS鸿蒙开发知识点,真正体系化!**
**由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新**
**如果你觉得这些内容对你有帮助,可以添加VX:vip204888 (备注鸿蒙获取)**
![img](https://img-blog.csdnimg.cn/img_convert/e3cd70d265fddcb18431d64a2c985a46.png)
**一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
取)**
[外链图片转存中...(img-Syid3vtK-1712864949076)]
**一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**