支付宝小程序框架 自定义组件·mixins

2020-09-18 10:31 更新

开发者有时可能会实现多个自定义组件,而这些自定义组件可能会有些公共逻辑要处理,小程序提供 mixins 用于解决这种情况。

示例代码:

  1. // /mixins/lifecycle.js
  2. export default {
  3. onInit(){
  4. console.log('init');
  5. },
  6. deriveDataFromProps(nextProps){},
  7. didMount(){},
  8. didUpdate(prevProps,prevData){},
  9. didUnmount(){},
  10. };

注意: onInitderiveDataFromProps 自基础库 1.14.0 开始支持,可以使用 my.canIUse('component2') 做兼容判断,并且,使用 component2 的相关功能,需要在 IDE 中的 详情 > 项目配置 中,勾选 component2。

  1. // /components/index/index.js
  2. import lifecycle from '/mixins/lifecycle';
  3. const initialState = {
  4. data: {
  5. isLogin: false,
  6. },
  7. };
  8. const defaultProps = {
  9. props: {
  10. age: 30,
  11. },
  12. };
  13. const methods = {
  14. methods: {
  15. onTapHandler() {},
  16. },
  17. }
  18. Component({
  19. mixins: [
  20. lifecycle,
  21. initialState,
  22. defaultProps,
  23. methods
  24. ],
  25. data: {
  26. name: 'alipay',
  27. },
  28. });
  29. <!-- /components/index/index.axml -->
  30. <view>{{name}}: {{age}}</view
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号