2.Component跨界面传值

注释：

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代码

---

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