小程序中如何自定义组件以及相关模板的封装

一、自定义组件的创建

1、知道封装组件的原因

  首先，我们要知道自定义组件以及模板的封装都是为了方便项目

2、创建组件的过程

比如说我们创建一个子组件：
   第一步：创建一个component文件并且在里面创建一个你所需要的文件（如：delete），
   在创建时可以右键--选择【新建component】可以创建一个类似于index的文件目录列表。
   第二步：就是将组件引入，引入需要将调用子组件的父组件的json文件里配置引入路径。
   如：
   {
 "usingComponents": {
   "组件名":"要引入的子组件路径",
    "Delete":"/components/delete/delete"
 },
 "navigationBarTitleText": "父组件"
 }
   
   第三步：只是引入还不够，还需要在父组件用json里的命名自定义标签进行调用。
   如：
     <Delete/>

3、下面是一个简单的例子

自定义的子组件

父组件json中传递子组件的路径

父组件中调用子组件

输出到页面的结果

总的来说：组件的创建还是简单的，我觉得的重点是，父传子，子传父，兄弟组件的传递参数，当然这也是难点。
还有就是小程序组件的创建和引入与vue的组件创建引入还是很相似的！(可以试着封装一些小程序组件，如返回顶部，轮播图等等)

二、模板的创建与调用

相比于组件来讲模板的创建从逻辑上讲可能复杂了些。

首先，要创建一个public文件

然后，在创建一个存放模板的movie_mb文件

在里面配置的一级模板，并引入二级模板movie_item

调用的模板参数

输出的结果

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200806193204522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5cTUx,size_16,color_FFFFFF,t_70