05 自定义组件

一、准备。新建 components/search 目录，通过“新建 Component”自动生成 js、json、wxml、wxss 4 个文件（不妨都命名为 index）
二、组件内像普通页面一样实现功能
三、如何使用组件
1、先在 json 配置文件中引入

"usingComponents": {
    "v-search": "/components/search/index"    
}

然后在页面中直接添加标记

<!-- ***.wxml -->
<v-search holder="网络" bind:search="onSearch"/>

2、向组件传递数据
上面的 holder 属性既是，组件内需要做的工作，先是在 js 中定义属性变量：

// components/search/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    holder:String
  },
  ...

然后，在 wxml 页面中即可，使用 {{ holder }}。
3、从组件中返回数据
在组件的事件处理中 triggerEvent 自定义事件。
Step1 组件内的事件绑定：

<!--components/search/index.wxml-->
<van-search value="{{value}}" 
    placeholder="{{holder}}"
    bind:change="onChange"
    bind:search="onSearch"
/>

Step2 组件内的事件处理

/**
   * 组件的方法列表
   */
  methods: {
    onSearch() {
      wx.cloud.callFunction({
        name:'search',
        success: res => {
          this.triggerEvent('search', res.result)
        },
  ...

Step3 组件使用者的事件绑定

<v-search holder="神经" bind:search="onSearch"/>

Step4 组件使用者的事件处理

  onSearch:function(e){
    wx.setStorageSync('search_result', JSON.stringify(e.detail))
    wx.navigateTo({url:'/pages/search/search'})
  }