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

学会封装代码，是程序猿必备的能力。
避免在开发过程中多处施展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~