uniapp props 변경시 오류가 발생하는 문제는 어떻게 해결하나요?

최근 uniapp을 이용하여 프로젝트를 개발할 때 props 전송 및 변경과 관련해 몇 가지 문제가 발생하여 오류가 발생할 수 있습니다. 이 문서에서는 이러한 문제에 대한 배경 정보와 해당 솔루션을 제공합니다.

1. 소품이란 무엇인가요?

Props(Properties의 약어)는 구성 요소에서 데이터를 전달하는 데 사용되는 메커니즘입니다. 구성요소 간 통신에는 소품과 이벤트라는 두 가지 방법이 있습니다. Props는 단방향 데이터 흐름을 전송합니다. 즉, 데이터가 상위 구성 요소에서 하위 구성 요소로 전송됩니다. 하위 구성 요소는 상위 구성 요소가 전달한 데이터를 읽을 수만 있고 수정할 수는 없습니다. 이벤트는 하위 구성 요소가 메시지를 전달하는 것을 참조합니다. 상위 구성 요소에.

Vue에서는 props 속성을 통해 구성 요소에 필요한 속성을 선언할 수 있습니다. 이러한 속성의 값은 상위 구성 요소에서 전달될 수 있으며 개체, 배열, 부울 값 등을 포함한 모든 유형의 JavaScript 데이터일 수 있습니다.

uniapp에서는 네이티브 애플릿과 H5 애플리케이션을 작성할 때 코드 구조를 일관되게 만들기 위해 uniapp은 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>

그런 다음 하위 구성 요소의 props를 통해 받습니다:

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

실행 후 상위 구성 요소에서 하위 구성 요소로 전달된 데이터가 페이지에 렌더링됩니다. .

2. props 변경 시 오류 보고

uniapp으로 개발할 때 하위 구성 요소의 props 값을 변경할 수 있습니다. 예:

<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 속성의 값을 직접 수정하지 말아야 한다는 것입니다. 왜냐하면 이 값의 업데이트는 상위 구성 요소가 다시 렌더링될 때 덮어쓰기되기 때문입니다. 대신 계산된 속성을 사용하거나 props 값을 사용하여 데이터를 처리해야 합니다.

3. Solution

그렇다면 이 문제를 어떻게 해결해야 할까요?

한 가지 해결책은 props의 값을 직접 사용하는 대신 하위 구성 요소에서 계산된 속성을 사용하는 것입니다.

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

이런 방식으로 상위 구성 요소에서 하위 구성 요소로 전달된 props의 값이 외부에서 변경되면 계산된 속성은 하위 구성 요소의 속성도 이에 따라 업데이트를 변경합니다. 이러한 방식으로 하위 구성 요소에 렌더링되는 것은 props를 직접 사용하는 것이 아니라 계산된 속성의 값입니다.

또 다른 해결 방법은 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>

이런 방식으로 상위 구성 요소에 데이터 속성을 전달합니다. props의 값을 기록하고 계산한 다음 계산된 결과를 하위 구성 요소에 전달합니다. 이러한 방식으로 하위 구성 요소에 렌더링되는 값은 props를 직접 사용하는 대신 계산된카운트 속성의 값입니다.

두 솔루션 모두 하위 구성 요소의 props 속성을 직접 수정하여 발생하는 오류를 방지할 수 있습니다.

4. 요약

유니앱을 이용하여 개발을 하다 보면 소품의 이전과 변경이 불가피합니다. 우리가 개발하는 애플리케이션을 보다 안정적이고 안전하게 만들기 위해서는 props 속성의 값을 직접 수정하는 것을 지양하고, 대신 계산된 속성이나 데이터 속성을 통해 props의 값을 기록하고 계산해야 합니다. 이러한 방식으로 우리의 애플리케이션은 더욱 강력하고 안정적일 수 있습니다.

위 내용은 uniapp props 변경시 오류가 발생하는 문제는 어떻게 해결하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!