「[Vue warn]: prop を直接変更しないでください」エラーへの対処方法-Vue.js-php.cn

「[Vue warn]: prop を直接変更しないでください」エラーへの対処方法

王林

リリース： 2023-08-17 11:12:28

オリジナル

2145 人が閲覧しました

如何处理“[Vue warn]: Avoid mutating a prop directly”错误

「[Vue warn]: prop を直接変更しないでください」エラーへの対処方法

Vue.js を使用して Web アプリケーションを開発すると、多くの場合、いくつかの警告が発生します。またはエラー。一般的な警告の 1 つは、「[Vue warn]: prop を直接変更しないでください」です。これは、コンポーネント内の親コンポーネントによって渡されたプロパティ (prop) を直接変更することを意味します。この記事では、このエラーを適切に処理する方法について説明し、コード例をいくつか示します。

まず、Vue.js がこの警告を発行する理由を理解しましょう。 Vue.js では、コンポーネント間のデータフローは一方向であり、親コンポーネントは props 属性を通じて子コンポーネントにデータを渡します。この設計により、データの一貫性と保守性が保証されます。ただし、渡されたこれらのプロパティを子コンポーネントで直接変更すると、混乱を招く予測不可能なデータが生成されます。

「[Vue warn]: prop を直接変更しないでください」エラーを回避するには、次の手順を実行できます。

プロパティを変更します (prop が渡されました)
```
// 父组件
<template>
  <ChildComponent :data="data" />
</template>
<script>
export default {
  data() {
 return {
   data: { message: 'Hello Vue!' }
 }
  }
}
</script>

// 子组件
<template>
  <div>{{ data.message }}</div>
</template>
<script>
export default {
  props: ['data'],
  data() {
 return {
   localData: this.data
 }
  }
}
</script>
```
ログイン後にコピー
この例では、親コンポーネントによって渡されたデータ属性を子コンポーネントの localData に保存します。このようにして、親コンポーネントのデータを変更せずに、子コンポーネントの localData を自由に変更できます。データ属性の値を取得するために子コンポーネントの data 関数で this.data を使用することに注意してください。これは、この関数では this.data が子コンポーネントのインスタンスを参照しているためです。

計算プロパティを使用して props 属性への変更を処理します:

// 父组件
<template>
  <ChildComponent :message="message" />
</template>
<script>
export default {
  data() {
 return {
   message: 'Hello Vue!'
 }
  }
}
</script>

// 子组件
<template>
  <div>{{ computedMessage }}</div>
</template>
<script>
export default {
  props: ['message'],
  computed: {
 computedMessage: {
   get() {
     return this.message;
   },
   set(value) {
     // 禁止直接修改props属性
     console.warn("[Vue warn]: Avoid mutating a prop directly");
   }
 }
  }
}
</script>

ログイン後にコピー

この例では、計算プロパティ (計算プロパティ) を使用して props 属性への変更を処理します。 get メソッドでは props 属性の値を返しますが、set メソッドでは props 属性の直接変更を禁止し、警告メッセージを出力します。このようにして、props 属性が読み取り専用であることを確認できます。

イベントを使用して、プロパティを変更するように親コンポーネントに通知します:

// 父组件
<template>
  <ChildComponent :message="message" @update-message="message => this.message = message" />
</template>
<script>
export default {
  data() {
 return {
   message: 'Hello Vue!'
 }
  }
}
</script>

// 子组件
<template>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
export default {
  props: ['message'],
  methods: {
 updateMessage() {
   const newMessage = 'New Message';
   // 触发自定义事件来通知父组件进行属性的修改
   this.$emit('update-message', newMessage);
 }
  }
}
</script>

ログイン後にコピー

この例では、ボタンがクリックされると、子コンポーネントは「update」というイベントをトリガーします。 - message" カスタムイベント。新しいメッセージをパラメーターとして渡します。イベントを受信した後、親コンポーネントはそのメッセージ属性を新しいメッセージに変更します。

要約すると、「[Vue warn]: prop を直接変更しないでください」エラーに対処する鍵は、Vue.js の一方向のデータフロールールに従うことです。親コンポーネントによって渡されたデータを直接変更しないでください。代わりに、子コンポーネントのデータにプロパティを保存したり、計算されたプロパティを使用してプロパティの取得と設定を処理したり、イベントを使用して親コンポーネントにプロパティの変更を通知したりすることができます。これらの方法により、データの混乱やエラーを回避し、Web アプリケーションの安定性と保守性を向上させることができます。

参考ドキュメント: