一、自定义组件
1、什么是自定义组件？
小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。
2、使用场景
- （1） 多个页面用到同样的东西
- （2） 页面功能很多,很复杂,使用组件来拆分逻辑
3、自定义组件组成
（1）json文件 用于于放置一些最基本的组件配置
（2）wxml 文件 组件模版
（3）wxss 文件 组件的样式（无法直接使用全局样式，需要通过@import导入）
（4）js 文件 组件的 JS 代码，承载组件的主要逻辑
（这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。）
4、使用组件
-
（1）新建自定义组件文件
-
在根目录新建components文件夹，然后右键新建自定义组件目录，最后右键新建Component
新建自定义组件
-
- （2）组件json文件配置
{
"component": true 这一组文件设为自定义组件
}
- （3）组件wxml编写
<!-- 子组件 -->
<view>我是子组件</view>
- （4）组件wxss文件，因为无法直接使用全局样式，需要导入
/* 自定义组件 */
@import "../../app.wxss";
-
（5）导入自定义组件
- （5.1）在父组件json文件的usingComponents中导入组件
{ "usingComponents": { "submit-bar":"../../components/submit-bar/index" 类似Vue中的导入组件：import xxx from '组件路径' } }- （5.2）在父组件wxml文件中以组件名作为标签使用组件
<submit-bar></submit-bar>
效果图
二、父子组件通信
（与Vue父子组件传参原理一样，学过Vue的盆友更容易上手哦）
1、父传子
- （1）在父组件中的子组件标签添加属性，给子组件传递数据
<submit-bar totalMoney="{{totalMoney}}" ></submit-bar>
- （2）子组件在js中通过properties接收，可以指定接收数据类型
properties: {
totalMoney: Number
}
2、子传父
- （1）在父组件的子组件标签自定义事件，传给子组件
<submit-bar bind:submit="submit" ></submit-bar>
- （2）子组件用
this.triggerEvent('父组件自定义事件', '要传递的参数')，触发父组件传过来的自定义事件
this.triggerEvent("submit", 'Hello Grayly')
-
（3）第二步执行后，父组件自定义事件绑定的函数就会执行，同时接受子组件传过来的数据
（在event.detail中可得到子组件传过来的参数）
submit(event) {
console.log(event);
},
父组件接收到子组件传过来的参数
