Bagaimana untuk menyelesaikan masalah bahawa ralat akan dilaporkan apabila prop uniapp ditukar?

Baru-baru ini, semasa membangunkan projek menggunakan uniapp, saya menghadapi beberapa masalah mengenai pemindahan dan perubahan prop, dan ralat mungkin berlaku. Artikel ini akan memberikan latar belakang kepada isu ini dan penyelesaiannya yang sepadan.

1. Apakah props?

Props (singkatan untuk Properties) ialah mekanisme yang digunakan dalam komponen untuk menghantar data. Terdapat dua cara untuk berkomunikasi antara komponen: prop dan acara. Props memindahkan aliran data sehala, iaitu, data dipindahkan daripada komponen induk kepada komponen anak Komponen anak hanya boleh membaca data yang diluluskan oleh komponen induk, tetapi tidak boleh mengubah suainya merujuk kepada mesej penghantaran komponen anak kepada komponen induk.

Dalam Vue, anda boleh mengisytiharkan sifat yang diperlukan oleh komponen melalui atribut props. Nilai sifat ini boleh dihantar daripada komponen induk dan boleh menjadi sebarang jenis data JavaScript, termasuk objek, tatasusunan, nilai Boolean, dsb.

Dalam uniapp, untuk menjadikan struktur kod konsisten semasa menulis applet asli dan aplikasi H5, uniapp menggunakan sintaks Vue dan API yang berkaitan dengannya. Oleh itu, uniapp turut menyokong penggunaan atribut props untuk menghantar data.

Sebagai contoh, tentukan prop dalam komponen induk:

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

dan kemudian terimanya melalui prop dalam komponen anak:

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

Selepas berjalan, komponen induk menghantar mesej kepada anak Data yang diluluskan oleh komponen akan dipaparkan pada halaman.

2. Ralat melaporkan apabila prop bertukar

Apabila membangun menggunakan uniapp, kami mungkin menukar nilai prop dalam sub-komponen, contohnya:

<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>

Dalam komponen kanak-kanak-komponen:

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

Tetapi ralat akan muncul pada masa ini:

[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.

Maksud ralat ini ialah kita harus mengelak secara langsung mengubah suai nilai atribut props, kerana Kemas kini kepada nilai ini akan ditimpa apabila komponen induk dipaparkan semula. Sebaliknya, kita harus memproses data melalui sifat yang dikira atau menggunakan nilai prop.

3. Penyelesaian

Jadi, bagaimana kita harus menyelesaikan masalah ini?

Satu penyelesaian ialah menggunakan sifat yang dikira dalam komponen anak dan bukannya menggunakan nilai props secara langsung:

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

Dengan cara ini, prop yang dihantar oleh komponen induk kepada komponen kanak-kanak ditukar nilai luaran, harta pengiraan komponen kanak-kanak dikemas kini dengan sewajarnya. Dengan cara ini, apa yang diberikan dalam komponen anak ialah nilai harta yang dikira, dan bukannya menggunakan prop secara langsung.

Penyelesaian lain ialah menghantar atribut data dalam komponen induk dan bukannya terus menggunakan nilai prop:

<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>

Komponen anak masih menggunakan prop untuk menerima:

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

Dengan cara ini, nilai prop direkodkan dan dikira melalui atribut data dalam komponen induk, dan kemudian hasil yang dikira dihantar kepada komponen anak. Dengan cara ini, nilai yang diberikan dalam komponen anak ialah nilai sifat computedCount dan bukannya menggunakan props secara langsung.

Kedua-dua penyelesaian boleh mengelakkan ralat yang disebabkan oleh mengubah suai atribut props secara langsung dalam subkomponen.

4. Ringkasan

Apabila kami membangun menggunakan uniapp, pemindahan props dan perubahan tidak dapat dielakkan. Untuk menjadikan aplikasi yang kami bangunkan lebih stabil dan selamat, kami perlu mengelak daripada mengubahsuai secara langsung nilai atribut props Sebaliknya, kami harus merekod dan mengira nilai props melalui atribut yang dikira atau atribut data. Dengan cara ini, aplikasi kami boleh menjadi lebih teguh dan boleh dipercayai.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa ralat akan dilaporkan apabila prop uniapp ditukar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!