vue 구성 요소 전달 객체에서 단방향 바인딩을 구현하는 방법은 무엇입니까?

이제 Vue 컴포넌트가 전달한 객체에 단방향 바인딩을 구현하는 예를 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue 컴포넌트를 사용할 때 컴포넌트 간에 데이터를 전달해야 하는 경우가 많습니다. 여기서는 문자열 변수나 숫자 변수를 전달하는 상황에 대해 논의하지 않습니다. 여기서는 객체를 전달할 때 발생하는 문제에 대해 설명합니다. 구성 요소 사이의 함정.

구성 요소 간에 객체가 전달될 때 이 객체의 참조 유형은 주소를 가리키므로 객체의 특정 속성 값이 하위 구성 요소에서 수정되면 상위 구성 요소에 있는 객체의 해당 속성도 변경됩니다. 따라서 이러한 종류의 양방향 바인딩이 필요하다면 이 방법도 좋은 방법이지만 이러한 종류의 양방향 바인딩이 필요하지 않은 경우에는 속성을 복사하기 위해 새 객체를 정의해야 합니다. 함정은 여기에 있습니다. 일반적인 var 또는 let 객체를 사용하는 경우(예:

computed: { 
  data: function () { 
   let obj={}; 
   obj=this.message//this.message是父组件传递的对象 
   return obj 
 } 
 },

데이터의 각 속성을 입력 상자에 각각 바인딩하고 수정하려고 하면) 단방향 바인딩 효과를 얻으려면 메서드를 추가해야 합니다

computed: { 
 data: function () { 
  let obj=Object.assign({}, this.message); 
  return obj 
 } 
 },

이런 방식으로 반환된 데이터는 새 개체이며 해당 개체를 가리키지 않습니다. 원본 개체의 주소이므로 이를 수정해도 상위 구성 요소는 영향을 받지 않습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JS 익명 함수 및 익명 자체 실행 함수의 개념과 사용법 분석

npm 관리자로 설치 시 권한 문제 해결

vue-router 관련 기본 지식 및 작동 원리

위 내용은 vue 구성 요소 전달 객체에서 단방향 바인딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!