Vue에서 데이터 전송을 달성하기 위해 구성 요소 내부의 데이터와 구성 요소 매개 변수의 소품을 사용하는 방법

Vue는 구성 요소가 매우 중요한 빌딩 블록인 매우 인기 있는 프런트 엔드 개발 프레임워크입니다. Vue에서는 컴포넌트 내부의 데이터와 컴포넌트 매개변수의 props를 잘 함께 사용하여 데이터 전송을 달성할 수 있습니다.

Vue 구성 요소에서 데이터는 구성 요소 내부의 상태 데이터입니다. 구성 요소의 모든 메서드에서 액세스하고 수정할 수 있습니다. 구성 요소 내부의 데이터를 사용하려면 다음과 같이 선언하면 됩니다.

  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }

이 예에서는 message라는 데이터를 선언합니다. 이 데이터는 구성 요소 내부의 모든 메서드에서 액세스하고 수정할 수 있습니다.

하지만 구성요소 간에 데이터를 공유하고 싶다면 어떻게 해야 할까요? 이때 컴포넌트 매개변수 props를 사용하여 데이터를 전달할 수 있습니다. Props를 사용하면 구성 요소 간에 데이터를 전달할 수 있습니다.

다음은 props를 사용하여 구성 요소에 데이터를 전달하는 방법을 보여주는 예입니다.

  // 父组件
  <template>
    <div>
      <child-component message="Hello Vue!"></child-component>
    </div>
  </template>

  // 子组件
  <template>
    <div>
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    props: ['message']
  }
  </script>

이 예에서 상위 구성 요소는 'Hello Vue!' 값이 포함된 message라는 prop을 하위 구성 요소에 전달합니다. 하위 구성 요소의 템플릿에서는 {{message}}를 사용하여 이 props의 값을 표시합니다.

하지만 하위 구성 요소에서 이 props의 값을 수정하고 싶다면 어떻게 해야 할까요? 이때 Vue에서 .sync 수정자를 사용하여 props를 전달하고 양방향 바인딩을 구현할 수 있습니다.

  // 父组件
  <template>
    <div>
      <child-component :message.sync="message"></child-component>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
  </script>

  // 子组件
  <template>
    <div>
      <input v-model="message">
      <p>{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    props: ['message', 'update:message']
  }
  </script>

이 예에서는 상위 구성 요소에 message라는 prop을 전달하고 .sync 수정자를 사용하여 구현합니다. 방법 바인딩. 하위 구성 요소에서는 v-model을 사용하여 메시지를 입력에 바인딩하고 구성 요소 내에서 해당 값을 수정합니다.

그러나 하위 구성 요소에서 props 값을 수정하려면 update:propName의 상위 구성 요소 이벤트도 정의하고 $emit를 사용하여 하위 구성 요소에서 이 이벤트를 트리거해야 한다는 점에 유의해야 합니다. 이 예에서는 update:message라는 이벤트를 정의하고 하위 구성 요소에서 $emit를 사용하여 상위 구성 요소의 메시지 값을 업데이트합니다.

요약하자면, 컴포넌트 내부의 데이터와 컴포넌트 매개변수 props를 통해 Vue에서 컴포넌트 간 데이터 전송을 쉽게 구현할 수 있습니다. 올바르게 사용하면 구성 요소 간에 데이터를 전달하는 것이 매우 간단해지고 코드를 유지 관리하기가 더 쉬워집니다.

위 내용은 Vue에서 데이터 전송을 달성하기 위해 구성 요소 내부의 데이터와 구성 요소 매개 변수의 소품을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!