文档中心 > 店铺动态卡片-开发指引

ref 获取组件实例

更新时间:2023/02/06 访问次数:11119

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>


说明:

1)使用ref 绑定 saveRef 之后,会在组件初始化时触发 saveRef 方法;

2)saveRef方法的参数ref为自定义组件实例,由框架传递给saveRef方法;

3)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>


FAQ

关于此文档暂时还没有FAQ
返回
顶部