Element PlusのExposesを理解した

いつもelement plusを使っていると、コンポーネント内の子要素を操作することに手間がかかっていた。

ドキュメントのコード例では書いていなさそう。

毎回ref指定してquerySelectorだったり、Vanilla JSでDOM操作するしかないと思いつつ作業していたが、ドキュメントで以下のようなものを発見した。

cascaderのドキュメント

Descriptionをcascader panel refやcascader content refで書いているということは、要素をrefで渡しているように見える。

Exposes項目に入っているので、vueのdefineExposeを指すと考えた。
defineExposeは子要素から親要素に渡すためのもので、refから.でその要素を指定すると使うことができる。

コード例

ElementPlus.vue

<script setup lang="ts">
const cascader = ref();

const suggestedElement = categoryCascader.value.contentRef.querySelector(
    '.el-cascader__suggestion-item',
) as HTMLElement;

onMounted(() => {
    suggestedElement.focus(); // mount時にcascaderにfocusする
});
</script>
<template>
    <el-cascader ref="cascader"></el-cascader>
</template>

終わりに

ドキュメントに何か書いてあるのに今必要なものだけに集中すると、時間の無駄をしてしまうことがわかった。ドキュメント大事。