微信小程序 发现之旅（三）—— 组件之间的参数传递

 

1、URL 传参

当使用 navigateTo() 方法跳转页面的时候，能够在 url 后面接 query 参数

 

而后在 Page 页面的生命周期函数 onLoad 中能够接收到这些参数

 

此外 reLaunch 和 redirecTo 也支持 URL 传参

 

 

2、事件处理

以前介绍的 properties 能够从外部传参到组件内部，若是须要向外部传参，就须要用到组件事件

当自定义组件触发事件时，在 methods 中添加处理函数，而后使用 triggerEvent 方法，指定事件名，建立自定义事件

而后在调用该组件的时候，添加这个自定义事件的处理函数

但目前只是完成了事件的连锁，要想经过事件传参还有不少工做要作

 

小程序的事件处理函数都没法传入自定义参数，只能接收固定参数 event

 可是能够经过这样的方式来建立额外参数 item：

而后在事件参数 event 中，event.currentTarget.dataset 来获取对应的参数

 

 

上面提到的 triggerEvent 方法能够包含三个参数，分别是事件名、detail 对象、事件选项

在获取到 dataset 中的参数以后，能够当作 detail 对象传给父组件

由此完成了自定义组件对父组件的传参

 

关于 triggerEvent 的第三个参数“事件选项”，能够参考这个表格：

 

 

3、组件关系

当两个自定义组件之间有着嵌套关系的时候，能够在两个组件以内定义 relations，从而直接访问对方组件的实例

好比有这样的两个组件：

上面的 <w-list> 的经过 <slot> 渲染到了 <w-block> 组件中，造成嵌套关系

这时能够在两个组件内部定义 relations

// components/w-block/w-block.js
Component({
  relations: {
    '../w-list/w-list': { // 对方组件的相对路径
      type: 'child', // 关联的目标节点应为子节点
      linked: function (target) {
        // 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期以后
      },
      linkChanged: function (target) {
        // 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期以后
      },
      unlinked: function (target) {
        // 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期以后
      }
    }
  },
  data: {
    name: "I'm WiseWrong",
    title: "Welcome to my blog",
    address: "http://www.cnblogs.com/wisewrong/"
  }
})

上面是 <w-block> 中定义的 relations，同时还须要在 <w-list> 中定义，并将 type 设为 parent

必须在两个组件中都定义 relations，不然不会生效

 

在组件内部，能够经过 this.getRelationNodes( 'path' ) 方法获取到由对应的组件实例组成的数组

当关联组件不止一个的时候，这个数组会包含全部的组件实例，并按照文档流的顺序排列

经过该方法，能够直接获取到关联组件的 data、properties、dataset，但没法获取到 methods

而后能够经过对应组件的 setData() 方法，修改组件实例的变量

PS：在小程序中，只有经过 setData 方法修改变量，才能即时更新前端页面（单向绑定）