Vue 상위-하위 구성 요소의 동기 전송 및 비동기 전송 소개(코드 포함)

이 글은 Vue 상위-하위 구성요소(코드 포함)의 동기 전송 및 비동기 전송에 대해 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

1. 동기식으로 데이터 전송

상위 구성 요소 food는 props를 통해 하위 구성 요소에 값 0을 전달합니다. 하위 구성 요소가 초기화되었습니다. 유형 필드를 가져오고 "0 Fruit" 문자를 렌더링할 수 있습니다. VUE의 양방향 바인딩 원칙에 따르면 비동기적으로 전송되는 데이터에 감시가 필요하다는 것을 아는 것은 어렵지 않습니다.

2.1 props

props에서 전달한 데이터가 템플릿과 연결되어 있는 경우 해당 데이터는 구성 요소가 초기화될 때 감시됩니다. 아래 코드에서 유형과 정보를 볼 수 있습니다.

props로 전달된 데이터가 템플릿과 연결되지 않은 경우 props로 전달된 데이터에 대한 watch를 추가하고 watch 메서드에서 템플릿과 연결된 개체를 수정합니다. 아래 코드에서 child_type을 볼 수 있습니다. 이 방법에서는 시계가 모니터링하는 것이 변경된 props이므로 대상 객체를 초기화해야 합니다.

// 父组件 food.vue
<template>
  <apple :type="type"></apple>
</template>
<script>
    data (){
        return {
          type: 0
      };
      }
</script>
// 子组件 apple.vue
<template>
  <span>{{childType}}</span>
</template>
<script>
   props: ['type'],
   created () {
           this.childType = this.formatterType(type);
   },
   method () {
           formatterType (type) {
        if (type === 0) {
          return "0 水果";
        }
        if (type === 1) {
          return "1 蔬菜";
        }
        return '';
      }
   }
</script>

2.2 vuex

데이터는 저장소에 저장되며 상위 구성 요소는 vuex의 메서드를 호출하여 데이터를 변경합니다.

스토어 데이터가 하위 구성 요소의 템플릿과 연결되어 있는 경우 하위 구성 요소는 초기화될 때 데이터를 감시합니다.

스토어 데이터가 하위 컴포넌트의 템플릿과 연결되지 않은 경우, 스토어 데이터에 대한 watch를 추가하고 watch 메서드에서 템플릿과 연결된 개체를 수정합니다. 템플릿과 연결된 개체를 초기화해야 합니다.

3. 동기식 또는 비동기식으로 데이터 전송

상위 구성 요소가 하위 구성 요소에 동기식 또는 비동기식으로 데이터를 전송할 수 있는 경우 먼저 하위 구성 요소 대상 개체는 생성 또는 계산 시 초기화되고 하위 구성 요소는 props에 의해 전달된 데이터를 관찰하고 대상 개체를 수정해야 합니다.

위 내용은 Vue 상위-하위 구성 요소의 동기 전송 및 비동기 전송 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!