call-method-easycom-uni-modules.uvue 1.5 KB
Newer Older
H
hdx 已提交
1 2
<template>
  <view>
H
hdx 已提交
3
    <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
H
hdx 已提交
4 5 6 7 8 9 10
  </view>
</template>

<script>
  export default {
    data() {
      return {
H
hdx 已提交
11
        $callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null
H
hdx 已提交
12 13 14 15
      }
    },
    onReady() {
      // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写,驼峰+ComponentPublicInstance
H
hdx 已提交
16
      this.$callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance;
H
hdx 已提交
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
    },
    methods: {
      callMethod1() {
        // 调用组件的 foo1 方法
        this.$callEasyMethod1!.foo1();
      },
      callMethod2() {
        // 调用组件的 foo2 方法并传递 1个参数
        this.$callEasyMethod1!.foo2(Date.now());
      },
      callMethod3() {
        // 调用组件的 foo3 方法并传递 2个参数
        this.$callEasyMethod1!.foo3(Date.now(), Date.now());
      },
      callMethod4() {
        // 调用组件的 foo4 方法并传递 callback
        this.$callEasyMethod1!.foo4(() => {
          console.log('callback')
        });
      },
      callMethod5() {
        // 注意: 返回值可能为 null,当前例子一定不为空,所以加了 !
        const result = this.$callEasyMethod1!.foo5('string1')! as string;
        console.log(result); // string1
      },
H
hdx 已提交
42 43 44 45
      callMethodTest(text: string): string | null {
        const result = this.$callEasyMethod1!.foo5(text)! as string;
        return result;
      },
H
hdx 已提交
46 47 48
    }
  }
</script>