Vue에서 상위-하위 구성요소의 데이터 전송, 수정 및 업데이트를 구현하는 방법(자세한 튜토리얼)

이제 Vue 상위-하위 구성 요소의 데이터 전송, 수정 및 업데이트 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

상위컴포넌트와 자식컴포넌트의 데이터 관계를 다음과 같이 4가지로 나누어보겠습니다.

상위컴포넌트는 자식컴포넌트의 데이터를 수정하여 실시간으로 업데이트합니다

자식 컴포넌트는 $emit를 통해 하위 컴포넌트를 전달합니다. 데이터인 this.$data는 현재 컴포넌트의 데이터(return{...})에 있는 모든 데이터를 참조하며,

this.$emit('data',this.$data);

그 다음 상위 컴포넌트의 getinputdata 메소드를 통해 데이터를 수신합니다.

@data='getinputdata'

데이터는 전달된 데이터이며, 이 데이터를 수정하면 상위 컴포넌트를 통해 하위 컴포넌트가 실시간으로 업데이트될 수 있습니다

getinputdata(data) {
 console.log(data);
 data.background = {
  backgroundColor: 'yellow',
  border: 'none'
 };
}

하위 컴포넌트는 상위 컴포넌트의 데이터를 수정합니다

상위 컴포넌트의 데이터 구성 요소는 하위 구성 요소에서 수정할 수 없으며 상위 구성 요소의 데이터 수정에서 위의 $emit 메서드를 통해서만 가능합니다.

Vue 공식 웹사이트에서 커스텀 이벤트를 참고하실 수 있습니다: https://cn.vuejs.org/v2/guide/comComponents.html#%E8%87%AA%E5%AE%9A%E4%B9% 89%E4% BA%8B%E4%BB%B6

자식 구성 요소는 상위 구성 요소의 데이터를 가져와서 수정하지만 실시간으로 업데이트하지는 않습니다.

1 하위 구성 요소는 상위 구성 요소의 데이터를 받습니다. props를 통해 상위 구성 요소를 만든 다음 props의 값을 할당하여 var로 변수를 선언하거나 이 변수를 사용합니다.

let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);

2. 하위 컴포넌트는 상위 컴포넌트가 props를 통해 전달한 데이터를 가져와서 data(return{...})의 변수에 props 값을 할당한 후 이 변수를 사용합니다.

this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);

Vue 공식 홈페이지에서 커스텀 이벤트를 참고하실 수 있습니다: https://cn.vuejs.org/v2/guide/comComponents.html#%E5%8D%95%E5%90%91%E6%95 %B0%E6 %8D%AE%E6%B5%81

부모 컴포넌트는 자식 컴포넌트의 데이터를 가져와 수정하지만 실시간으로 업데이트하지는 않습니다.

여기서의 방법은 'The 하위 구성요소는 상위 구성요소의 데이터를 가져와서 수정하지만 실시간으로 업데이트하지는 않습니다.' 방식은 동일하며 값을 전달하는 방식만 다릅니다. 하위 구성 요소는 $emit를 통해 상위 구성 요소에 값을 전달합니다.

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

관련 기사:

Vue.js 사용자 정의 이벤트 양식 입력 컴포넌트 메소드

vue.js 메소드로 배열 위치 이동과 동시에 뷰 업데이트

vue.js 또는 js 메소드 구현 중국어 A-Z 정렬

위 내용은 Vue에서 상위-하위 구성요소의 데이터 전송, 수정 및 업데이트를 구현하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!