主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2023/04/28
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 ネタが続くかも。