구성 요소의 메서드를 사용하여 vue의 소품 값을 변경하려면 어떻게 해야 하는가?

구성 요소의 메서드를 사용하여 vue의 소품 값을 변경하려면 어떻게 해야 하는가?

나는 구성 요소들 간에 데이터를 전송하는 vuejs를 연습하고 있으며 이것이 나의 코드다.

내 블레이드 템플릿:

  `<app-user-details :name="name"></app-user-details>`

그런 다음 내 자식 구성 요소에서:

<template>
   <div>
       <h4>You may view the user details here</h4>
       <p>Many Details</p>
       <p>User name: {{ name }}</p>
       <button @click="resetName">reset name</button>
   </div>
</template>

<script>
export default {
   name: 'app-user-datails',
   props: {
       name: {
           type: String
       }
   },
   methods: {
       resetName() {
        return  this.name = 'Max'
       }
   }
}
</script>

메서드 resetName()을(를) 기준으로 소품 이름을 변경하려고 하는데 콘솔에서 이 오류가 발생함

vue.js:1355 검색되지 않은 TypeError: 프록시에서 'set': 속성 'name'에 대해 트랩이 거짓으로 반환됨

어떡하지?!

문서:에서 하위 구성 요소 내부에 대한 프로포트를 업데이트하지 마십시오.

모든 소품은 자식 재산과 부모 재산 사이에 일방적 구속력을 형성한다: 부모 재산이 업데이트되면 자식에게 흘러가지만 반대로 흘러가지 않는다.이렇게 하면 자식 구성 요소가 부모 상태를 실수로 변경하지 않게 되어 앱의 데이터 흐름을 더 이해하기 어렵게 만들 수 있다.

그러나 하위 구성 요소에서 새 이름으로 이벤트를 내보낼 수 있다.

  resetName() {
   this.$emit('updateName', 'Max')
  }

이벤트를 청취하여 상위에서 업데이트하십시오.

 <app-user-details :name="name" @updateName="name = $event"></app-user-details>

참조URL: https://stackoverflow.com/questions/64930905/how-can-i-change-the-value-of-props-in-vue-with-a-method-in-a-component