Vue3 expose() 関数
Vue3 オプションAPIVue3 では、expose()関数は、コンポジション API でコンポーネント内部のメソッドとプロパティを公開するためのツールです。
expose()通常、setup()関数と一緒に使用することで、開発者はコンポーネント内部のどのプロパティやメソッドを外部からアクセス可能にするかを明確に指定できます。
なぜ expose() 関数が必要なのか？
Vue2 では、コンポーネントのプロパティとメソッドはデフォルトで公開されており、外部から直接アクセスできました。しかし、この設計には次のような問題が生じる可能性があります：
- セキュリティの問題：内部のメソッドが意図せず公開され、安全でない操作を引き起こす可能性があります。
- 保守性の問題：どのプロパティやメソッドが外部で使用されているかを追跡しにくく、保守の複雑さが増します。
Vue3 では、expose()関数が導入され、開発者はコンポーネントの公開インターフェースをより正確に制御できるため、上記の問題を解決できます。
expose() 関数の使い方
基本構文
例
export default {
setup(props, context) {
const internalMethod = () => {
console.log('This is an internal method');
};
const publicMethod = () => {
console.log('This is a public method');
};
// publicMethod メソッドを公開
context.expose({
publicMethod
});
return {
internalMethod
};
}
};
setup(props, context) {
const internalMethod = () => {
console.log('This is an internal method');
};
const publicMethod = () => {
console.log('This is a public method');
};
// publicMethod メソッドを公開
context.expose({
publicMethod
});
return {
internalMethod
};
}
};
解説
上記のコードでは、2つのメソッドを定義しています：internalMethodとpublicMethod。これによりcontext.expose()、私たちが公開したのはpublicMethod、一方internalMethodは外部からアクセスされません。
使用例
1. 親子コンポーネント間の通信
親コンポーネントと子コンポーネントがあり、親コンポーネントが子コンポーネントの特定のメソッドを呼び出す必要があるとします。
子コンポーネント
例
export default {
setup(props, context) {
const childMethod = () => {
console.log('Child method called');
};
context.expose({
childMethod
});
return {};
}
};
setup(props, context) {
const childMethod = () => {
console.log('Child method called');
};
context.expose({
childMethod
});
return {};
}
};
親コンポーネント
例
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const childRef = ref(null);
onMounted(() => {
if (childRef.value) {
childRef.value.childMethod();
}
});
return {
childRef
};
}
};
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const childRef = ref(null);
onMounted(() => {
if (childRef.value) {
childRef.value.childMethod();
}
});
return {
childRef
};
}
};
2. コンポーネントライブラリのカプセル化
コンポーネントライブラリを開発するとき、コンポーネントのカプセル化と安全性を維持するために、一部のメソッドとプロパティのみを公開したい場合があります。
例
export default {
setup(props, context) {
const internalState = ref('internal state');
const publicState = ref('public state');
const publicMethod = () => {
console.log('Public method called');
};
context.expose({
publicState,
publicMethod
});
return {
internalState
};
}
};
setup(props, context) {
const internalState = ref('internal state');
const publicState = ref('public state');
const publicMethod = () => {
console.log('Public method called');
};
context.expose({
publicState,
publicMethod
});
return {
internalState
};
}
};
注意事項
- expose() を複数回呼び出す：複数回呼び出すと
expose()、最後の呼び出しの内容だけが公開されます。 - ref と組み合わせて使用する：親コンポーネントでは、これにより
ref子コンポーネントを参照し、その公開されたメソッドを呼び出します。 - 互換性：
expose()は Vue3 の新機能です。プロジェクトが Vue3 以降のバージョンを使用していることを確認してください。
その他の拡張