codecamp

支付宝小程序框架 自定义组件·ref获取组件实例

1.14.0 版本开始,自定义组件支持使用 ref 获取自定义组件实例,可以使用 my.canIUse('component2') 做兼容。 并且,需要在 IDE 中的 详情 > 项目配置 中,勾选 component2。

// /pages/index/index.js
Page({
  plus() {
    this.counter.plus();
  },
  // saveRef 方法的参数 ref 为自定义组件实例,运行时由框架传递给 saveRef
  saveRef(ref) {
    // 存储自定义组件实例,方便以后调用
    this.counter = ref;
  },
});
<!-- /pages/index/index.axml -->
<my-component ref="saveRef" />
<button onTap="plus">+</button>

说明

  • 使用ref 绑定 saveRef 之后,会在组件初始化时触发 saveRef 方法。
  • saveRef方法的参数ref为自定义组件实例,由框架传递给saveRef方法。
  • ref 同样可以用于父组件获取子组件的实例。

// /components/index/index.js
Component({
  data: {
    counter: 0,
  },
  methods: {
    plus() {
      this.setData({ counter: this.data.counter + 1 })
    },
  },
})
<!-- /components/index/index.axml -->
<view>{{counter}}</view>

自定义组件 ref 定义段

自基础库 1.18.0 开始,自定义组件(component2)支持使用 ref 定义段指定调用者传递ref时获取的值。 未使用 ref 定义段时,调用者传递ref获取的值是自定义组件的 this (插件的自定义组件将返回 null)。 使用这个定义段时,将以这个定义段的函数返回值代替。

// 自定义组件内部
// /components/index/index.js
Component({
  ref() {
    return { key: 'value' }
  }
<!-- 使用自定义组件时 -->
<!-- /pages/index/index.axml -->
<my-component ref="saveRef" />
// /pages/index/index.js
Page({
  // 此时saveRef 方法的参数 ref 即是 my-component 自定义组件中的 ref 定义段的返回值
  saveRef(ref) {
    // 存储自定义组件实例,方便以后调用
    this.counter = ref; // 等于 { key: 'value' }
  },
});
支付宝小程序框架 自定义组件·mixins
支付宝小程序框架 自定义组件·使用
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }