注释：

1.component 的导入细节参考 [1.自定义导航栏 https://www.jianshu.com/p/94a1ad752c82)

2.本文主要讲解 component的外部界面基本的传参与方法的调用

3.个人 感觉 小程序中的 传参与方法的调用 有点像 OC 中自定义控件+ delegate 的写法

0.截图

列表截图.png

    list 为 component
    home为调用 component的页面

1.Component 中方法

component中js 命名注意点.png

XXX.js

// 3.1 点击瀑布流 item 头像

_tapAvator:  function(res)  {

// 0.注意 ：一般Component内方法名字 前面 会加一个 下划线 _ ，例如：_tapAvator; 外部方法：tapAvator

// 1.trigger ：触发

// 2."tapAvator" ：传递给 外界调用的 方法名字

// 3.res.currentTarget.dataset.uid：传递给 外界调用的 参数

this.triggerEvent("tapAvator", res.currentTarget.dataset.uid);

},

XXX.wxml

component中wxml截图.png

2.外部调用方法

XXX.wxml

2.1截图

调用页面 截图.png

2.2代码

<list  id="list"  wx:for="{{images}}"  wx:key="this"  d-value="{{dValue}}"  currentPage="{{currentPage}}"  list-data="{{item}}"  bind:tapAvator="tapAvator"  bind:tapWaterfallItem="tapWaterfallItem"></list>

<!--

1\. d-value; currentPage; list-data; 传参给 component

dValue currentPage listData 对应component中properties个属性名称（- 会使后面第一个字幕变成大写）

2.bind:tapAvatror : 中的tapAvator为 component中的

this.triggerEvent("tapAvator", res.currentTarget.dataset.uid);的方法名称

3."tapAvator" ：为该页面js中 调用的方法 外部方法名字

-->

XXX.js

// 3.点击 瀑布流 item
tapWaterfallItem:  function(e)  {
  // 1.获取component 返回的参数
  var cunrrentID = e.detail;
  // 2.根据返回的数据 进行处理
  wx.setStorageSync("currentArticleID", cunrrentID)
    wx.navigateTo({
      url:  '../noteDetail/noteDetail',
      success:  function()  {
        wx.setNavigationBarTitle({
        title:  '笔记详情',
      })
    }
  })
},