なつねこメモ

2023/04/28

Vue3 でも React でいう useImperativeHandle をしたい

React で、子コンポーネントの関数を何らかの理由で呼び出したい場合、 useImperativeHandle を使います。

import React, { useImperativeHandle } from "react";
 
const SomeComponent = React.forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    log: () => console.log("Hello from SomeComponent!");
  }));
});

これを Vue 3 でもしたい。で、それに相当する API は defineExpose というもの。
こんな感じで出来る。

<script lang="ts" setup>
const log = console.log("Hello from SomeComponent!");
 
defineExpose({ log });
</script>

API としては、外部に露出するという意味では Vue の defineExpose は命名がわかりやすいですね。
ということで、メモでした。
最近は ES5 + AngularJS + Vue.js 2 で書かれたものを ES2015+ + TypeScript + Vue.js 3 に書き直してるので、しばらくは Vue ネタが続くかも。