Vue3中如何在自定义脚本中调用组件方法?

Question

vue3 执行自定义脚本，自定义脚本中调用组件自身的方法,.call中传值proxy，但是无法获取getBoxByUID(), 报错提示“getBoxByUID is not defined”

const getBoxByUID = (pid) => {
    for (let key in itemRefs) {
        if (itemRefs[key].propsData.boxItem.pid == pid) return itemRefs[key]
    }
}
const { proxy } = getCurrentInstance()
const alarmChangedScript = () => {
    let scriptStr =
        "var alarm = getBoxByUID(1447428693).curHighestAlarm; var measObjName = '状态正常'; if (alarm != null) {measObjName = alarm.measObjectName}; getBoxByUID(1447428693).refreshData(measObjName);"
    new Function(scriptStr).call(proxy)
}

vue2中的写法如下

  getBoxByUID(id) {
    let curComponent;
    this.$children.forEach((childComponet: any) => {
      let boxItem = childComponet.$options.propsData.boxItem;
      if (boxItem.id === id) {
        curComponent = childComponet;
      }
    });
    return curComponent;
  }

  alarmChangedScript(scriptString) {
    // let scriptStr = "var alarm = this.getBoxByUID(-1004645418).curHighestAlarm;var measObjName = '暂无';var measZoneName = '暂无';if (alarm != null) {measObjName = alarm.measObjectName;measZoneName = alarm.regionName;}this.getBoxByUID(-1943778209).refreshData(measZoneName);this.getBoxByUID(-1360208550).refreshData(measObjName);"
    new Function(scriptString).call(this);

请问vue3中，哪个字段可以替代vue2中的this

Answer 1

将 getBoxByUID 方法添加到 proxy 对象上，这样就可以在脚本中通过 this 调用。

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const { proxy } = getCurrentInstance();

    proxy.getBoxByUID = (pid) => {
      for (let key in proxy.itemRefs) {
        if (proxy.itemRefs[key].propsData.boxItem.pid == pid) return proxy.itemRefs[key];
      }
    };

    const alarmChangedScript = () => {
      let scriptStr =
        "var alarm = this.getBoxByUID(1447428693).curHighestAlarm; var measObjName = '状态正常'; if (alarm != null) {measObjName = alarm.measObjectName}; this.getBoxByUID(1447428693).refreshData(measObjName);";
      const dynamicFunction = new Function(scriptStr).call(proxy);
    };

    return {
      alarmChangedScript,
    };
  },
};

Answer 2

vue官网不推荐使用getCurrentInstance

<script lang="ts">
  import { defineComponent } from 'vue';

  function useSetup() {
    function getBoxByUID(pid: number) {
      return {
        curHighestAlarm: {
          measObjectName: 'measObjectName',
          regionName: 'regionName',
        },
        refreshData: (data: string) => {
          console.log(data);
        },
      };
    }

    return {
      getBoxByUID,
    };
  }

  export default defineComponent({
    setup() {
      const proxy = useSetup();
      let scriptStr = `var alarm = this.getBoxByUID(-1004645418).curHighestAlarm;
var measObjName = '暂无';
var measZoneName = '暂无';
if (alarm != null) {
    measObjName = alarm.measObjectName;
    measZoneName = alarm.regionName;
}
this.getBoxByUID(-1943778209).refreshData(measZoneName);
this.getBoxByUID(-1360208550).refreshData(measObjName);`;
      new Function(scriptStr).call(proxy);
    },
  })
</script>