小程序自定义组件

一、自定义组件

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);
      },

父组件接收到子组件传过来的参数