Refs

Template Ref

如果是 Html Element 或者常规的 Vue 组件（没有使用 ioc 容器），那么就可以使用Template Ref引用组件实例

1. Html Element

以 input element 为例：

import { onControllerMounted } from 'zova';

export class ControllerPageComponent {
  inputRef: HTMLInputElement | null;

  protected async __init__() {
    onControllerMounted(() => {
      this.inputRef?.focus();
    });
  }
}

• 声明变量 inputRef
• 响应 onControllerMounted 事件，执行 focus 方法

export class RenderComponent {
  render() {
    return (
      <div>
        <input
          ref={ref => {
            this.inputRef = ref as any;
          }}
        />
      </div>
    );
  }
}

• 通过回调函数接收 ref 参数，赋值给 inputRef

2. Vue 组件（没有使用 ioc 容器）

以 quasar 的 QBtn 组件为例：

export class ControllerPageComponent {
  btnRef: InstanceType<typeof QBtn> | null;

  protected async __init__() {
    onControllerMounted(() => {
      this.btnRef?.click();
    });
  }
}

• 声明变量 btnRef
• 响应 onControllerMounted 事件，执行 click 方法

export class RenderComponent {
  render() {
    return (
      <div>
        <input
          ref={ref => {
            this.btnRef = ref as any;
          }}
        />
      </div>
    );
  }
}

• 通过回调函数接收 ref 参数，赋值给 btnRef

Controller Ref

对于使用了 ioc 容器的 Vue 组件，不能使用Template Ref，而是直接引用 Vue 组件对应的controller bean实例

1. 声明变量

先在父组件的controller.ts中声明变量：

import { ControllerCard } from '../../component/card/controller.js';

export class ControllerPageComponent {
  cardRef: ControllerCard;
}

2. controllerRef

然后设置子组件的controllerRef属性获取到controller bean实例的引用值：

import Card from '../../component/card/index.vue';

export class RenderComponent {
  render() {
    return (
      <div>
        <Card
          controllerRef={ref => {
            this.cardRef = ref;
          }}
        ></Card>
      </div>
    );
  }
}