Zenn
🔂

【Vue】key属性を利用して子コンポーネントを再マウントする方法

2023/12/27に公開
Nuxt
Vue.js
Vue 3
Nuxt 3
tech

:key属性の基本

Vue.jsでは、:key属性はDOM要素やコンポーネントの再利用を制御するために使われます。この属性にユニークな値を設定することで、Vueは要素やコンポーネントが異なるものであると認識し、再マウントを行います。

子コンポーネントの再マウント

Nuxt3アプリケーションにおいて、特定の条件下で子コンポーネントを再マウントする必要がある場合があります。例えば、ユーザーのアクションに応じてコンポーネントの状態をリセットしたい時です。:key属性を利用することで、これを簡単に実現できます。

手順

  1. 子コンポーネントの準備: まず、再マウントさせたい子コンポーネントを作成します。

    <!-- components/MyComponent.vue -->
<template>
  <div>子コンポーネントの内容</div>
</template>

  2. 親コンポーネントの設定: 親コンポーネントで:key属性を動的に結びつけ、TypeScriptを使用して設定します。

    <!-- pages/index.vue -->
<template>
  <div>
    <button @click="reMountComponent">コンポーネントを再マウント</button>
    <MyComponent :key="componentKey" />
  </div>
</template>

<script setup lang="ts">
import MyComponent from '~/components/MyComponent.vue';
import { ref } from 'vue';

const componentKey = ref<number>(0);

const reMountComponent = (): void => {
  componentKey.value++;
};
</script>

    この例では、ボタンをクリックするたびにcomponentKeyが増加し、MyComponentの:keyが変更され、結果としてコンポーネントが再マウントされます。

注意点

  • パフォーマンス: 頻繁にコンポーネントを再マウントするとパフォーマンスに影響を与える可能性があります。この技術を適切な場面で使用することが重要です。
  • ユニークなキー: :keyには常にユニークな値を設定してください。それが状態の変更やリストの更新を正しく管理するためのキーです。

まとめ

Nuxt3で:key属性を使って子コンポーネントを再マウントする方法は、状態のリセットや更新が必要な場合に非常に便利です。しかし、パフォーマンスへの影響を考慮しながら、この機能を賢く利用しましょう。

参考

https://vueframework.com/docs/v3/ja/guide/migration/key-attribute.html

Discussion