注释：
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: '笔记详情',
})
}
})
},
