vue.js의 하위 컴포넌트에 전달된 소품의 로컬 복사본을 작성하시겠습니까?

vue.js의 하위 컴포넌트에 전달된 소품의 로컬 복사본을 작성하시겠습니까?

vue.js에서 상위 데이터를 변경하지 않고 프로포트를 편집하는 올바른 방법은 무엇입니까?즉, vue.js에서 부모에서 자녀로 속성을 전달할 때마다 자녀 구성 요소에서 해당 속성을 변경하면 변경 내용이 부모 구성 요소에도 반영됩니다.

vue.js에서 자녀에게 전달된 자산의 로컬 복사본을 만들 수 있는 방법이 있습니까?

나는 이것을 검색했지만, 모든 곳에 이렇게 함으로써 우리가 이것을 이룰 수 있다고 쓰여 있다.

 props:["user"],
  data(){
    return {
      localUser: Object.assign({}, this.user)
    }
  }

여기서 사용자에게 오브젝트가 전달되고 로컬 사용자에게 오브젝트의 복사본을 만들고 있지만 전혀 동작하지 않습니다.로컬 사용자는 정의되어 있지 않습니다.

부모 컴포넌트의 상태에 영향을 주지 않고 자녀 컴포넌트의 부모 속성을 변경해야 하는 경우, 즉 자녀 컴포넌트에서 자신의 복사본을 만든 후 편집해야 하는 경우, 이와 같은 시나리오를 경험해 본 적이 있습니까?

이에 대한 어떠한 통찰도 도움이 될 것입니다.

In vue@2.3 어디선가 읽은 적이 있습니다.3. 아버지 컴포넌트에서 자녀 컴포넌트로 소품을 전달하려면 로컬 데이터를 수동으로 생성하여 소품을 저장해야 합니다.이 때문에 많은 작업이 불필요해집니다.

다음과 같이 로컬 데이터를 생성할 수 있습니다.

props: ['initialCounter'],
data: function () {
    return { counter: this.initialCounter }
}

하지만 제 경우에도 잘 안 돼요.개발 목적으로 vue cli 3.0.1을 사용하고 있습니다.

여기 같은 내 코드가 있다.

응용 프로그램에는 목록 보기가 있습니다.

사용자가 [See Focused View]버튼을 클릭하면 사용자는 아래 뷰로 리다이렉트 됩니다(실제로 부트스트랩 - 모달 뷰).

여기서 사용자는 Name의 값을 편집할 수 있지만, 여기서 이름을 적절한 컴포넌트의 속성으로 전달하기 때문에 여기서 편집하면 상위 컴포넌트(목록 보기)에서도 업데이트됩니다.

바이올린에서는 자 컴포넌트가 를 사용하여data오브젝트 배열입니다.그러나 이렇게 하면 얕은 복사본만 생성되므로 어레이 요소는 여전히 원래 인스턴스를 참조하므로 이러한 동작이 발생합니다.

어레이를 상세하게 복사하기 위한 몇 가지 솔루션:

• 를 사용합니다.이것은 원시 오브젝트 속성에 대해 적절히 기능합니다(String,Number,BigInt,Boolean,undefined , , , , 입니다.null

  data() {
    return {
      local_data: JSON.parse(JSON.stringify(this.data))
    }
  }
  

  (복수 1)

• 개체를 새 개체로 매핑합니다. 이 작업은 깊이가 1(내포된 배열/개체는 계속 얕게 복사됩니다).

  data() {
    return {
      local_data: this.data.map(x => ({...x}))
    }
  }
  

  (복수 2)

• 다음과 같은 유틸리티 라이브러리 사용lodash의:

  data() {
    return {
      local_data: _.cloneDeep(this.data)
    }
  }
  

  (제3장)

언급URL : https://stackoverflow.com/questions/52459374/creating-local-copy-of-passed-props-in-child-component-in-vue-js