uniappのpropsを変更するとエラーが報告される問題を解決するにはどうすればよいですか?

最近、uniapp を使用してプロジェクトを開発していると、props の転送と変更でいくつかの問題が発生し、エラーが発生することがあります。この記事では、これらの問題の背景とそれに対応する解決策について説明します。

1. 小道具とは何ですか?

Props (Properties の略) は、コンポーネントでデータを渡すために使用されるメカニズムです。コンポーネント間で通信するには、プロップとイベントという 2 つの方法があります。 Props は一方向のデータ フローを転送します。つまり、データは親コンポーネントから子コンポーネントに転送されます。子コンポーネントは、親コンポーネントによって渡されたデータを読み取ることのみができますが、変更することはできません。イベントは、メッセージを渡す子コンポーネントを指します。親コンポーネントに。

Vue では、props 属性を通じてコン​​ポーネントに必要なプロパティを宣言できます。これらのプロパティの値は親コンポーネントから渡すことができ、オブジェクト、配列、ブール値などの任意のタイプの JavaScript データを使用できます。

uniapp では、ネイティブ アプレットと H5 アプリケーションを作成する際にコード構造の一貫性を保つために、Vue の構文とそれに関連する API を採用しています。したがって、uniapp はデータを渡すための props 属性の使用もサポートしています。

たとえば、親コンポーネントで prop を定義します:

<template>
  <child-component :message="parentMessage" />
</template>
<script>
  import childComponent from 'child-component.vue'
  export default {
    components: {
      childComponent
    },
    data() {
      return {
        parentMessage: 'Hello'
      }
    }
  }
</script>

次に、子コンポーネントの prop を通じてそれを受け取ります:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: {
      message: String
    }
  }
</script>

実行後、親によって渡されたデータコンポーネントから子コンポーネントまでがページ上にレンダリングされます。

2. プロパティ変更時のエラー報告

uniapp を使用して開発する場合、サブコンポーネント内のプロパティの値を変更することがあります。例:

<template>
  <child-component :count="num"/>
</template>
<script>
  import childComponent from 'child-component.vue'
  export default {
    components: {
      childComponent
    },
    data() {
      return {
        num: 0
      }
    },
    mounted() {
      setInterval(() => {
        this.num++
      }, 1000)
    }
  }
</script>

サブコンポーネント 子コンポーネント内:

<template>
  <div>{{ count }}</div>
</template>
<script>
  export default {
    props: {
      count: Number
    }
  }
</script>

ただし、この時点でエラーが表示されます:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

このエラーの意味は、プロパティの値を直接変更することは避けるべきであるということです。この値の更新は、親コンポーネントが再レンダリングされるときに上書きされるためです。代わりに、計算されたプロパティを通じて、または props の値を使用してデータを処理する必要があります。

3. 解決策

それでは、この問題をどのように解決すればよいでしょうか?

1 つの解決策は、props の値を直接使用するのではなく、子コンポーネントで計算されたプロパティを使用することです。

<template>
  <div>{{ renderCount }}</div>
</template>
<script>
  export default {
    props: {
      count: Number
    },
    computed: {
      renderCount() {
        return this.count
      }
    }
  }
</script>

このように、props の値が親コンポーネントからコンポーネントに渡されると、子コンポーネントが外部で変更されると、子コンポーネントの計算されたプロパティもそれに応じて更新されます。このように、子コンポーネントでレンダリングされるのは、props を直接使用するのではなく、計算されたプロパティの値です。

もう 1 つの解決策は、props 値を直接使用する代わりに、親コンポーネントでデータ属性を渡すことです:

<template>
  <child-component :count="num" :computedCount="computedCount"/>
</template>
<script>
  import childComponent from 'child-component.vue'
  export default {
    components: {
      childComponent
    },
    data() {
      return {
        num: 0,
        computedCount: 0
      }
    },
    mounted() {
      setInterval(() => {
        this.num++
        this.computedCount++
      }, 1000)
    }
  }
</script>

子コンポーネントは引き続き props を使用して受信します:

<template>
  <div>{{ count }}</div>
</template>
<script>
  export default {
    props: {
      count: Number,
      computedCount: Number
    }
  }
</script>

Inこのようにして、props の値が親コンポーネントのデータ属性を通じて記録および計算され、計算された結果が子コンポーネントに渡されます。このように、子コンポーネントでレンダリングされる値は、props を直接使用するのではなく、computedCount プロパティの値になります。

どちらのソリューションでも、サブコンポーネントの props 属性を直接変更することによって発生するエラーを回避できます。

4. 概要

uniappを使用して開発を行う場合、propsの転送と変更は避けられません。開発するアプリケーションをより安定して安全なものにするためには、props 属性の値を直接変更することを避け、計算された属性またはデータ属性を通じて props の値を記録および計算する必要があります。このようにして、アプリケーションはより堅牢で信頼性が高くなります。

以上がuniappのpropsを変更するとエラーが報告される問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。