Vue Academy · レッスン

defineExposeとuseAttrs

defineExpose()によるコンポーネント内部の公開、フォールスルー属性に使うuseAttrs()について学習します。

レッスン 3/413 ステップ

「defineExposeとuseAttrs」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

公開とフォワーディング

コンポーネント間の通信を補完するツールが2つあります。defineExposeを使うと親から子の内部にアクセスでき、useAttrsを使うと親から渡された残りの属性を取得できます。どちらも再利用可能なコンポーネントでよく使われます。

コンポーネントはデフォルトで閉じている

<script setup>では、コンポーネント内のどの要素も、親のテンプレートrefからアクセスできません。このカプセル化は有用ですが、親から子のメソッドを呼び出す必要が正当に生じる場合もあります。

defineExpose で公開する

defineExposeを使うと、選択したメソッドや値を親に明示的に公開できます。共有したいものをオブジェクトとして渡します。

<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>

親から公開したメソッドを呼び出す

親はテンプレートrefを使って子を取得し、公開されたメソッドを呼び出します。defineExposeに渡したキーだけが公開されます。

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>

<template>
  <Child ref="childRef" />
</template>

フォーカスの例

focusメソッドを公開すると、カプセル化を壊さずに、親からカスタムコンポーネント内の入力要素へフォーカスできます。

<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>

フォールスルー属性とは

親がコンポーネントに、宣言されたpropやイベントではない属性（class、id、data-*など）を指定すると、それはフォールスルー属性になります。

useAttrs で attrs を読み取る

useAttrs()は、すべてのフォールスルー属性を含むオブジェクトを返します。スクリプト内で属性を調べたり、別の場所へ移動したりする必要がある場合に使用します。

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>

フォールスルーの自動適用

デフォルトでは、Vueはフォールスルー属性をテンプレートの単一のルート要素に適用します。コンポーネントにルートdivが1つある場合、親から渡されたclassは自動的にそこへ適用されます。

自動フォールスルーを無効にする

ラッパー内側のinputなど、ルート以外の場所に属性を配置したい場合は、通常のscriptブロックでinheritAttrs: falseを指定して自動フォールスルーを無効にします。

<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

v-bind で attrs を転送する

自動フォールスルーを無効にした後、v-bind="attrs"を使って選択した要素へattrsを転送します。これはinputラッパーの標準的なパターンです。

<template>
  <label>
    <span>Name</span>
    <input v-bind="attrs" />
  </label>
</template>

それぞれを使う場面

defineExpose：親がテンプレートrefを介して子のメソッドを呼び出せるようにします。
useAttrs + inheritAttrs: false + v-bind：親から渡された属性を配置する場所を正確に制御します。

クイックチェック

exposeとattrsについての知識を確認してください。

対話的なレッスンで答える

まとめ

重要なポイント：

defineExposeは、選択したメソッドや値を親のrefに公開します。
フォールスルー属性とは、親から渡されるpropでもイベントでもない属性です。
useAttrs()でそれらを読み取り、自動フォールスルーではルート要素が対象になります。
inheritAttrs: falseとv-bind="attrs"を使うと、転送先を変更できます。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「defineExposeとuseAttrs」レッスンは無料ですか？

はい。「defineExposeとuseAttrs」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「defineExposeとuseAttrs」で何を学びますか？

defineExpose()によるコンポーネント内部の公開、フォールスルー属性に使うuseAttrs()について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「defineExposeとuseAttrs」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る