call-method-other.uvue

<template>
  <view>
    <component1 ref="component1"></component1>
  </view>
</template>

<script>
  // 非easycom组件需import引用组件 component1.uvue
  import component1 from './component1.uvue'

  export default {
    components: {
      component1
    },
    data() {
      return {
        component1: null as ComponentPublicInstance | null
      }
    },
    onReady() {
      // 通过组件 ref 属性获取组件实例
      this.component1 = this.$refs['component1'] as ComponentPublicInstance;
    },
    methods: {
      callMethod1() {
        // 通过 $callMethod 调用组件的 foo1 方法
        this.component1!.$callMethod('foo1');
      },
      callMethod2() {
        // 通过 $callMethod 调用组件的 foo2 方法并传递 1个参数
        this.component1!.$callMethod('foo2', Date.now());
      },
      callMethod3() {
        // 通过 $callMethod 调用组件的 foo3 方法并传递 2个参数
        this.component1!.$callMethod('foo3', Date.now(), Date.now());
      },
      callMethod4() {
        // 通过 $callMethod 调用组件的 foo4 方法并传递 callback
        this.component1!.$callMethod('foo4', () => {
          console.log('callback')
        });
      },
      callMethod5() {
        // 通过 $callMethod 调用组件的 foo5 方法并接收返回值
        // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
        const result = this.component1!.$callMethod('foo5', 'string1') as string;
        console.log(result); // string1
      },
      callMethodTest(text: string): string | null {
        const result = this.component1!.$callMethod('foo5', text) as string;
        return result;
      },
    }
  }
</script>