如何创建使用小程序自定义组件

最近开发小程序项目，小程序的的文档挺详细的，特别是官方提供了很多组件。但是，对于一些项目适用场景，官方所提供的组件是无法满足的。这时候，需要我们自己去开发一个自定义组件，来满足当前项目的需求。

如何创建一个自定义组件

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

首先，我们需要新建一个 components 文件夹，用于存放我们以后开发中的所用组件，我们在 components 组件中新建一个 module文件夹来存放我们的组件，在 module下右击新建 Component 并命名为 module后，会生成对应的 json wxml wxss js 4个文件，这就是一个自定义组件的组成部分，这样组件初始化工作已完成。同时我们还需要声明组件，需要在module. json 文件中进行自定义组件声明（将 component 字段设为 true ）：

{  "component": true,  "usingComponents": {}
}

同时，还要在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模版和样式 。下面为一个组件的完整结构。

<!-- 这是自定义组件的内部WXML结构 --><view class="inner">
  {{innerText}}<button type='primary' bindtap='change'>子组件点击按钮</button></view><slot></slot><slot name="homePage"></slot>

/* 这里的样式只应用于这个自定义组件wxss结构 */.inner {  color: red;
}

在自定义组件的js文件中,需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法,

/* 这个自定义组件js结构 */Component({  options: {    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },  properties: {    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {      type: String,      value: 'default value',
    }
  },  data: {    // 这里是一些组件内部数据
    someData: {}
  },  methods: {    // 这里是一个自定义方法
    change: function(){      // 子组件触发事件传给父页面
      this.triggerEvent("change")  
    },  // 子组件自己的方法
  childrenFunction(){      console.log('我被父组件调用了')
    }
  }
})

如何使用一个自定义组件

既然是组件，必然是在页面引入使用的，我们一般称该页面为父页面。首先,我们应该在要用组件的那个页面中（父页面）引用声明.也就是在.json文件。如index.json文件：

  "usingComponents": {    "module": "/components/module/module"
  }

当我们引入组件之后，就可在父页面使用该自定义组件了。

父页面如何将数据传给子组件呢？
父页面通过inner-text将数据传给子组件，子组件通过innerText来接受父页面传过来的父页面变量text的数据。

父页面该如何获取子组的data，以及子组件的方法？
我们在引入组件时，给子组件设置一个id，通过this.selectComponent('#module')的方法来获取module组件，即获得了该组件里的所有内容，包括data里的内容（this.module.data），以及方法的调用（this.module.childrenFunction()）。

子组件如何调用父页面的方法呢？
通过this.triggerEvent("change")方法，将子组件触发的事件传给父页面，父页面通过bind绑定一个方法来接受子组件传过来的change事件方法，从而调用到父组件的方法。triggerEvent()函数有三个参数，第一个参数为暴露给父节点的事件类型。第二个参数为向父组件传递的数据，第三个参数为选项，传入对象进去。

组件slot的理解？
slot与vue插槽很类似，有了slot的话，可以使组件更加灵活使用。例如，一个组件的的某些内容在不同页面引用所展示的内容不一样，这时我们使用slot来实现。name为homePage的slot，我们在index.wxml使用了，而在别的页面未使用的话，别的页面就不会显示<view name="homePage"></view>里的内容。

具体如下：

<!-- 父页面 --><!-- 页面的 WXML --><view class="container">
        <module
        id='module'
        inner-text="{{text}}"
        bind:change="change">
        <view>这里是插入到组件slot中的内容</view>
        <view name='homePage'>这里插入到组件homePage的slot中的内容</view>
    </module>
    <button type='primary' style='height: 40px;' bindtap='childrenFunction'>父页面调用子组件方法</button></view>

//index.js// 获取应用实例const app = getApp()
Page({  data: {    text: '初始值1'
  }  /* 生命周期函数--监听页面初次渲染完成*/
  onReady: function () {    // 获得module组件
    this.module = this.selectComponent('#module');
  }  // 点击事件
  change() {       console.log('moudule组件点击事件')      this.setData({        text: '子组件点击事件改变了我'    
      })
   }   // 父页面调用子组件的方法
   childrenFunction(){    this.module.childrenFunction()
  }
})

作者：蓝茫
链接：https://www.jianshu.com/p/4f19452adefb