Vue 2 - 소품 변경에 대한 경고

Question

https://laracasts.com/series/learning-vue-step-by-step 시리즈를 시작했습니다. 다음 오류로 인해 Vue, Laravel 및 AJAX 과정을 중단했습니다:

vue.js:2574 [Vue 경고]: 상위 구성 요소가 다시 렌더링될 때마다 값을 덮어쓰므로 props를 직접 변경하지 마세요. 대신, prop의 값을 기반으로 데이터나 계산된 속성을 사용하세요. 변경되는 소품: "list"(구성 요소에 있음)

이 코드는 main.js

에 있습니다. 으아악

목록 속성을 재정의할 때 문제가 created()에 있다는 것을 알고 있지만 Vue를 처음 사용하기 때문에 문제를 해결하는 방법을 전혀 모릅니다. 문제를 해결하는 방법(그리고 이유를 설명해주세요)을 아는 사람이 있나요?

Answer 1

Vue 모드가 props 向下，events업되었습니다. 간단해 보이지만 사용자 정의 구성 요소를 작성할 때 잊어버리기 쉽습니다.

Vue 2.2.0부터 v -model(계산 속성 포함)을 사용할 수 있습니다. 저는 이 조합이 구성 요소 간에 간단하고 깨끗하며 일관된 인터페이스를 생성한다고 생각합니다.

• 구성요소에 전달된 모든 props 都保持响应状态（即，它不会被克隆，也不需要 watch 함수는 변경 사항이 감지되면 로컬 복사본을 업데이트합니다. < /里>
• 변경사항은 자동으로 부모에게 전송됩니다.
• 다양한 수준의 구성 요소와 함께 작동합니다.

계산된 속성을 사용하면 setter와 getter를 개별적으로 정의할 수 있습니다. 이를 통해 Task 구성 요소를 다음과 같이 다시 작성할 수 있습니다.

으아아아

model 속성은 관련 prop与v-model을 정의하고 변경 시 어떤 이벤트가 발생하는지 정의합니다. 그런 다음 다음과 같이 상위 구성 요소에서 이 구성 요소를 호출할 수 있습니다.

으아아아

listLocal 计算属性在组件内提供了一个简单的 getter 和 setter 接口（将其视为私有变量）。在 #task-template 中，您可以渲染 listLocal 并且它将保持反应性（即，如果 parentList 更改，它将更新 Task< /代码> 组件）。您还可以通过调用 setter（例如 this.listLocal = newList）来更改 listLocal 그러면 변경 사항이 부모에게 전송됩니다.

이 패턴의 장점은 listLocal을 listLocal 传递给 Task 的子组件（使用 v-model의 하위 구성 요소에 전달할 수 있고(v-model 사용) 하위 구성 요소의 변경 사항이 맨 위로 전파된다는 것입니다. 레벨 구성 요소.

예를 들어 싱글이 있다고 가정해 EditTask 组件，用于对任务数据进行某种类型的修改。通过使用相同的 v-model 和计算属性模式，我们可以将 listLocal 传递给组件（使用 v-model):

으아아아

If EditTask发出更改，它将适当地调用listLocal上的set()，从而将事件传播到顶层。同样，EditTask 组件也可以使用 v-model 다른 하위 구성 요소(예: 양식 요소)를 호출합니다.

Answer 2

이것은 다음과 관련이 있습니다: 로컬에서 소품을 변경하는 것은 Vue 2

에서 안티 패턴으로 간주됩니다.

prop를 로컬에서 변경하려면 지금 해야 할 일은 dataprops를 초기 값으로 사용하여 props

에서 필드 코드>값을 선언한 다음 복사본을 변경하는 것입니다.

으아아아 자세한 내용은 Vue.js 공식 가이드

---

에서 읽어보실 수 있습니다.

참고 1: 참고 prop 및 propdata에 대해서는 안

해서는 안 됩니다. 예:

으아아아 참고 2: props props 및 reactivity와 관련하여 약간의 혼란 이 있는 것 같으므로 이

스레드🎜를 살펴보는 것이 좋습니다.