使用wepy开发小程序-4|给列表组件加个跳转事件

上次我们说到要想让列表项点击实现跳转的功能应该怎么办？
那好，我们先在itemRestaurant添加一个tap点击事件，看看是否可以执行。

添加tap事件

实际上在首页点击列表项是会打印出我们的数据的，但问题是，现在我们的要求是在这个点击事件内添加一个页面跳转的功能，而页面跳转只能在page页面实现。
也就是说，我们现在的首要任务是如何让

this.$navigate('./order')

在itemRestaurant的tap里实现？

来看下我们是如何实现的吧。
首先$navigate是一个页面的方法，只有在page里才生效，所以index.wpy文件：

methods = {
  linkTo (url, evt) {
    this.$navigate(url);
  }
}

同样是在index.wpy,在template使用子组件的时候

 <itemRestaurant @childFn.user="linkTo"></itemRestaurant>

子组件itemRestaurant的代码片段为

<template>
    <view class="item-restaurant" @tap="tap">
      <wxc-avatar class="avatar" mold="square" src="{{list.img}}"></wxc-avatar>
    </view>
</template>
<script>
  import wepy from 'wepy'
  export default class itemRestaurant extends wepy.component {
    methods = {
      tap () {
          console.log('child is clicked')
          this.$emit('childFn', './order')
      }
    }
    events = {
    };
  }
</script>

那其实是什么意思呢，意思就是说。
点击子组件本应该是触发tap的，但是tap说页面跳转这事儿我做不了，我给你写个推荐信你去找page吧，所以emit就带着childFn这个推荐信，推荐信，推荐信里阐述了具体要跳到哪个页面（比如说order），
page是怎么识别这封推荐信的呢？
就是靠下面的内容

@childFn.user="linkTo"

看到了childFn就知道要调用linkTo函数。

解释的比较牵强……
既然我们能成功的跳转页面，那我们就继续下一个页面的搭建吧。