【自定义组件】uniapp&vue开发,自定义封装组件步骤

导读:本篇文章讲解 【自定义组件】uniapp&vue开发,自定义封装组件步骤,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

学会封装代码,是程序猿必备的能力。
避免在开发过程中多处施展cv大法,封装代码有利于提升代码的复用性,可以大大减少复制粘贴带来的冗余代码。
以下是封装代码的具体步骤:

1.创建组件页面

在项目文件夹里创建一个与page平级的components页面,并在里面创建一个与该组件名相同的页面:(注意:不用在pages.json文件里再去配置了。)

在这里插入图片描述

2.在组件中写props属性用于接收值(若不进行值传递可以不写)。

此处我这里并没有进行组件传参,只是在多个页面使用到了该组件。以下是需要配置的内容:
在这里插入图片描述

到这里为止,我们组件就封装完成了,接下来是在其他页面使用该组件。

3.使用组件。

打开使用组件的页面,导入并且注册组件。
在这里插入图片描述
在页面中使用的格式:<组件名称 组件属性="对应的值"></组件名称>

4.离开页面时销毁组件

问题:当多个页面都用到子组件时,跳转其他页面后再回到该页面时,发现子组件的弹窗还显示。
在这里插入图片描述

解决方案:当该页面隐藏的时候,当前页面引用的子组件也隐藏。具体代码如下:
在这里插入图片描述
在这里插入图片描述

<!-- 留言弹窗-组件 -->
<leaveMessage ref="leavemsg"></leaveMessage>

onHide() {
	// console.log('打印',this.$refs.leavemsg)
	//离开页面时,销毁留言组件的弹窗
	this.$refs.leavemsg.isLeavemess = false
	this.$refs.leavemsg.$refs.popup.hide()
},

ending~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/96027.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!