uni-app 页面封装组件并引用到页面

相信大家在开发的时候都会把项目中模块相似的都会单独做个组件，比如头部搜索、列表。。。等，然后可以随意的在需要的页面中引入。这样不仅简化代码，更方便维护。今天我们看下在uni-app中如何简单的创建组件并引用到页面中。
上篇文章中讲到了目录中各个文件的用途，components这个文件夹就是存放公共组件的地方。我们可以在这里面自行创建文件，接下来我们就拿列表来说下
在components文件中创建list文件，

在这里插入图片描述

创建list.vue文件后，然后根据需求进行编写布局。我们来看下代码，（样式我就不贴了）：

根据上面的代码，我们可以看到在js中我们数据都存放在props里面了。这样我们的组件里面的代码就算是完事了。接下来我们要在页面中引入该组件。

以上就是简单的讲了下uni-app中如何创建组件并引入到页面中，这里和小程序还是有点区别的。

小程序中页面引入组件如下：

nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '订单查询', //导航栏 中间的标题
}

好了今天就写到这了，有不足的地方欢迎大家评论指正。