Vue 3.2 より setup 関数の第2引数の context に expose という関数が追加されました。
expose を使うことにより、そのコンポーネントが公開するプロパティを明示的に示すことができるようになります。
これについてのメモです。
公式ドキュメントはこちら
使い方
対象のコンポーネント
script 部分のみ抜粋
ChildComponent.vue
<script>
export default {
name: "ChildComponent",
setup(props, context) {
const func = () => {
console.log("child func");
};
// funcを公開
context.expose({
func
})
return {
}
},
};
</script>
利用する側のコンポーネント
Parent.vue
<template>
<div>
<ChildComponent ref="child" />
<button @click="handleClick">click me!</button>
</div>
</template>
<script>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";
export default {
name: "Parent",
components: {
ChildComponent,
},
setup() {
const child = ref(null);
const handleClick = () => {
// 公開されている関数を呼び出す
child.value.func();
};
return {
child,
handleClick,
};
},
};
</script>
expose で公開された関数はchild.value.func() のような形で利用することができます。
また expose を使ったコンポーネントは
下で挙げるような return に含めるものとは異なり child.value はまた別の形のインスタンスになっているようです。(console.log(child.value) をしてみて差異を比較するとわかります。)
おわりに
これよりも前のバージョンでは
setup(props, context) {
const func = () => {
console.log("child func");
};
return {
func
}
},
このように setup 関数の中でreturn に含めて返すことで 同じことができましたが
テンプレートで利用しないものまで 含めるのは違和感がありました。
expose 関数を使うことで 「外部に公開するもの」「テンプレートで使うもの」を
明示的に示すことができるので このあたりの問題を解決することができるかなと思います。