[淘宝小程序] 父子组件方法传递

子向父传递方法

1.在父组件（本文中用的是一个页面）中引入子组件"myComponent"

在[pageName].json中输入

{
  "usingComponents": {
    "my-component": "../../components/myComponent/myComponent"
  }
}

支付宝小程序要求文件夹名与组件名一致，引用名不能大写，且引入组件时只需输入名称，不需要扩展名，相关的js，acss，axml，json会一起引入。所以这里会出现两级"myComponent"。

2.在父组件axml中使用myComponent并设置ref

<view>
  <my-component ref="myRef">
</view>

3.在父组件js文件中引用ref

Page({
  // ...省略其他属性...
  myRef(ref) {
    this.myChild = ref; // 将子组件的引用与父组件绑定，方便其他方法使用
  },
  onClick() {
    this.myChild.onChange(); // 调用子组件的onChange()方法
  }
});

在axml文件中ref属性定义的方法，其参数为组件本身。 

4.子组件myComponent只需要在js文件中定义onChange()方法就可以了

Component({
  // ...省略其他属性...
  onChange() {
    console.log('子组件响应')
  }
});

注意：以上功能要先开启“component2”编译功能才能使用 。（在小程序开发工具界面->详情中勾选）

父向子传递方法

1.父组件中引入子组件（与之前所述相同）

2.父组件js文件中定义方法

Page({
  // ...省略其他属性...
  tapChild() {
    console.log('子组件点击')
  }
});

3.父组件axml文件中向子组件传递方法

<view>
  <my-component onTapChild="tapChild">
</view>

这里两点很神奇的地方请注意：

1)支付宝小程序要求，进行方法传递时，axml中的属性名必须以on开头，否则视为一般属性

2)当像后代传递方法时，不要写双大括号（与一般传参区分）

4.子组件js中引用

Component({
  // ...省略其他属性...
  onTap() {
    this.props.onTapChild();
  }
});

这里稍微提一点，小程序要求方法带on，同时，通过props获取到的方法名一样是带on的，不要把on拿掉（我以为是分开的，曾经拿掉过，然后就undefined了）