How to solve the problem that an error will be reported when the props of uniapp are changed?

Recently, in developing projects using uniapp, I have encountered some problems with props transfer and change, and errors may occur. This article will provide the background to these issues and their corresponding solutions.

1. What are props?

Props (abbreviation for Properties) is a mechanism used in components to pass data. There are two ways to communicate between components: props and events. Props transfers one-way data flow, that is, data is transferred from the parent component to the child component. The child component can only read the data passed by the parent component, but cannot modify it; event refers to the child component passing messages to the parent component.

In Vue, you can declare the properties required by the component through the props attribute. The values ​​of these properties can be passed from the parent component and can be any type of JavaScript data, including objects, arrays, Boolean values, etc.

In uniapp, in order to make the code structure consistent when writing native applets and H5 applications, uniapp adopts Vue's syntax and its related APIs. Therefore, uniapp also supports using props attributes to pass data.

For example, define a prop in the parent component:

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

Then receive it through props in the child component:

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

After running, the data passed by the parent component to the child component will be rendered onto the page.

2. Error reporting when props changes

When developing using uniapp, we may change the values ​​of props in sub-components, for example:

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

Sub-component In child-component:

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

But an error will appear at this time:

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

The meaning of this error is that we should avoid directly modifying the value of the props attribute, because the update of this value will be Overwritten when the parent component is re-rendered. Instead, we should process the data through computed properties or using the values ​​of props.

3. Solution

So, how should we solve this problem?

One solution is to use calculated properties in the child component instead of directly using the value of props:

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

In this way, when the value of the props passed by the parent component to the child component is changed externally , the child component's computed properties will be updated accordingly. In this way, what is rendered in the child component is the value of the calculated property, rather than using props directly.

Another solution is to pass a data attribute in the parent component instead of directly using the props value:

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

The child component still uses props to receive:

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

In this way, the value of props is recorded and calculated through a data attribute in the parent component, and then the calculated results are passed to the child component. In this way, the value rendered in the child component is the value of the computedCount property instead of using props directly.

Both solutions can avoid errors caused by directly modifying the props attribute in the subcomponent.

4. Summary

When we develop using uniapp, props transfer and change are inevitable. In order to make the application we develop more stable and secure, we need to avoid directly modifying the value of the props attribute. Instead, we should record and calculate the value of props through calculated attributes or a data attribute. In this way, our applications can be more robust and reliable.

The above is the detailed content of How to solve the problem that an error will be reported when the props of uniapp are changed?. For more information, please follow other related articles on the PHP Chinese website!