Vue 3で「propsが更新されない」ときに確認すべきポイント

Vue 3を使用していると、親コンポーネントから子コンポーネントに渡したpropsが更新されないという問題に直面することがあります。この問題は、Vueのリアクティブシステムやデータフローの理解が不足しているときに発生しやすいです。

この記事では、propsが更新されない原因とその対処法について詳しく解説します。

Contents

1. Vueのデータフローとpropsの基本
2. propsが更新されない原因
3. propsが更新されないときの対処法
4. まとめ

1. Vueのデータフローとpropsの基本

Vueでは、データは親から子へ一方向に流れます。親コンポーネントが持つデータを子コンポーネントに渡す際には、propsを使用します。propsは読み取り専用であり、子コンポーネントから直接変更することはできません。この設計により、アプリケーションの状態管理が容易になります。

// 親コンポーネント
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
};
</script>

// 子コンポーネント
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

このように、親コンポーネントから子コンポーネントにデータを渡すことができますが、親のデータが変更されたときに子が正しく更新されない場合があります。

2. propsが更新されない原因

2.1. 親コンポーネントのデータが更新されていない

最初に確認すべきは、親コンポーネントのデータが正しく更新されているかどうかです。Vueのデータはリアクティブですが、データの更新方法によっては、Vueが変更を検知できない場合があります。

// 親コンポーネント
<template>
  <button @click="updateMessage">Update Message</button>
  <ChildComponent :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
  methods: {
    updateMessage() {
      this.parentMessage = 'Updated Message!';
    },
  },
};
</script>

このコードでは、ボタンをクリックするとparentMessageが更新され、子コンポーネントに新しいメッセージが渡されます。

2.2. propsのリアクティブ性の理解不足

Vue 3では、propsはリアクティブな変数として扱われますが、propsのプロパティを分割代入すると、そのリアクティブ性が失われることがあります。以下の例を見てみましょう。

// 子コンポーネント
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String,
  },
  setup(props) {
    const { message } = props; // ここでリアクティブ性が失われる
    return { message };
  },
};
</script>

この場合、messageはpropsから分割代入されているため、親コンポーネントでparentMessageが更新されても、子コンポーネントのmessageは更新されません。

2.3. オブジェクトや配列のpropsの変更

propsとして渡されたオブジェクトや配列を子コンポーネント内で直接変更すると、親コンポーネントのデータも変更されることがあります。これは、JavaScriptの参照渡しの特性によるものです。

// 親コンポーネント
<template>
  <ChildComponent :user="user" />
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Taro',
        age: 30,
      },
    };
  },
};
</script>

// 子コンポーネント
<template>
  <button @click="changeName">Change Name</button>
</template>

<script>
export default {
  props: {
    user: Object,
  },
  methods: {
    changeName() {
      this.user.name = 'Hanako'; // これにより親のuserも変更される
    },
  },
};
</script>

このように、子コンポーネントでpropsを直接変更することは推奨されていません。代わりに、イベントを発行して親コンポーネントに変更を通知する方法が推奨されます。

3. propsが更新されないときの対処法

3.1. 親コンポーネントのデータ更新を確認する

まずは、親コンポーネントのデータが正しく更新されているかを確認します。Vue Devtoolsを使用して、親コンポーネントのデータが変更されているかを確認することができます。

3.2. 分割代入を避ける

propsを分割代入する代わりに、直接propsを使用するか、toRefsを使用してリアクティブな参照を作成します。

import { toRefs } from 'vue';

export default {
  props: {
    message: String,
  },
  setup(props) {
    const { message } = toRefs(props); // これによりリアクティブ性を保持
    return { message };
  },
};

3.3. イベントを使用して親のデータを更新する

子コンポーネントから親コンポーネントのデータを変更する場合は、$emitを使用してイベントを発行します。

// 子コンポーネント
<template>
  <button @click="updateName">Change Name</button>
</template>

<script>
export default {
  props: {
    user: Object,
  },
  methods: {
    updateName() {
      this.$emit('update:user', { ...this.user, name: 'Hanako' });
    },
  },
};
</script>

// 親コンポーネント
<template>
  <ChildComponent :user="user" @update:user="updateUser" />
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Taro',
        age: 30,
      },
    };
  },
  methods: {
    updateUser(updatedUser) {
      this.user = updatedUser; // 親のデータを更新
    },
  },
};
</script>

このように、子コンポーネントから親コンポーネントにデータの変更を通知することで、データの整合性を保つことができます。

3.4. watchを使用してpropsの変更を監視する

propsの変更を監視するために、watchを使用することもできます。これにより、propsが変更されたときに特定の処理を実行することができます。

import { watch } from 'vue';

export default {
  props: {
    user: Object,
  },
  setup(props) {
    watch(() => props.user, (newUser) => {
      console.log('User updated:', newUser);
    });
  },
};